Vue 路由基本使用

1、安装vue-router

//Vue2
npm i vue-router@3
//vue3
npm i vue-router

2、使用VueRouter

main.js

// 引入VueRouter
import VueRouter from "vue-router";
//使用
Vue.use(VueRouter)

3、路由文件(路由器)  src下创建router文件夹 src/router/index.js  

注意是routes 不是routers

import VueRouter from "vue-router";


// 默认暴露
export default new VueRouter({
    routes:[
        {   
            // path 是路径，component是组件
            path: '',
            component:
        },
        {
            path:'',
            component:
        }
    ]
})


// export default router

4、引入router

mian.js

// 引入 vue 和 App
import Vue from "vue";
import App from "./App.vue";
import VueRouter from 'vue-router'
import router from './router/index'
Vue.use(VueRouter)

// 关闭 开发提醒
Vue.config.productionTip =false



new Vue({
    el:'#app',
    render: h => h(App),
    router:router
   
})

 5、实现切换 router-link 与 to

<router-link class="list-group-item" active-class="active" to="/about">About</router-link>　

active-class 实现点击高亮

6、指定展示位置

<router-view></router-view>

 7、路由组件一般放在 pages文件夹里和一般组件区分开来

在src文件夹下新建 pages文件夹

 8、通过切换隐藏路由，默认是销毁组件，有需要的时候再挂载

9、每个组件都有自己的$route属性

10、整个应用只有一个router，可以通过组件$router获取