Vue2：vue-router的基本使用方法

一、情景说明

实现Vue项目页面的单页面无抖动跳转
这个时候就需要vue-router插件的支持

二、案例

1、安装

vue2安装的vue-router版本对应的是3版本
vue3安装的vue-router版本对应的是4版本

安装
npm i vue-router@3
查看版本
npm list vue-router

2、编写路由器文件

vue_test/src/router/index.js
我这里用两个组件进行案例演示

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

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

3、配置路由器

main.js

//引入Vue
import Vue from 'vue'
//引入App组件
import App from './App.vue'
//引入路由插件
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false;
//应用插件
Vue.use(VueRouter);
//创建vm，整个项目就这1个vm，其他的都是vc组件
new Vue({
    el:"#app",
    render: h => h(App),
    router:router
});

4、组件中使用

Vue中借助router-link标签实现路由的切换

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

指定组件的呈现位置

<router-view></router-view>

经过以上配置
在页面上点击About页签，那么，在router-view处就会展示对应About组件
在页面上点击Home页签，那么，在router-view处就会展示对应Home组件

这就是vue-router的一个简单的基本使用案例

三、几个注意点

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