Vue CLI：Vue Router 路由组件基本使用（一）

还原vue项目

//安装最新的版本
npm install
//安装适用vue2的版本 （package.json文件有版本）
npm install vue@2.6.14

安装 vue-router 命令

//vue2中       
npm i vue-router@3
//vue3 
npm i vue-router

编写router配置项（router/index.js）

// 该文件专门用于创建整个应用的路由器

import VueRouter from 'vue-router';

// 引入组件
import About from '../pages/About';
import Home from '../pages/Home';

// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
}) 

安装VueRouter插件插件（main.js）

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'; // 引入VueRouter 
import router from './router'; // 引入路由器

Vue.config.productionTip = false
Vue.use(VueRouter) // 安装VueRouter插件

new Vue({
  render: h => h(App),
  router:router // 注册路由器
}).$mount('#app')

实现切换和指定位置展示（App.vue）

<template>
  <div id="app">
    <div class="nav">
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link class="nav-item" active-class="active" to="/about">About</router-link>
      <router-link class="nav-item" active-class="active" to="/home">Home</router-link>
    </div>

    <div class="main">
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>

  </div>
</template>

注意点

• 路由组件通常存放在 pages 文件夹里，一般组件通常存放在 components 文件夹
• 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
• 每个组件都有自己的 $route 属性，里面存储着自己的路由信息
• 整个应用只有一个 router ,可以通过组件的 $router 属性获取到