Vue-router 路由的基本使用

Vue-router是一个Vue的插件库，专门用于实现SPA应用，也就是整个应用是一个完整的页面，点击页面上的导航不会跳转和刷新页面。

一、安装Vue-router

npm i vue-router        // Vue3安装4版本

npm i vue-router@3    // Vue2安装3版本 

 

二、引入和使用插件

import VueRouter from "vue-router";

Vue.use(VueRouter);

三、编写router配置项

创建一个和main.js平级的文件夹router，再在该文件夹下创建index.js文件用于编写router配置项：

import VueRouter from "vue-router";    // router配置项文件

// 引入需要切换的组件

// 创建并暴露router实例对象

export default new VueRouter({

    routes: [

        {

            path: "/路径名称1",

            component:组件1

        },

        {

            path: "/路径名称2",

            component:组件2

        }

    ]

})

 

router配置完成后，在main.js中进行引入和配置：

四、修改切换按钮

将原来控制导航的按钮切换为如下格式的标签：

       <router-link active-class="选中样式" to="/路径">内容</router-link>

五、指定组件展示位置

在展示组件的地方使用如下标签：

 <router-view></router-view>

 

六、注意点 

1. 路由组件我们通常创建一个和main.js平级的文件夹pages，把路由组件放在pages文件夹中，一般组件放在components中。

2. 通过点击切换按钮，当前展示的组件被销毁掉了，需要展示的时候再进行挂载。

3. 配置了router后，每一个组件都有自己的$route属性，存储着自身的路由信息。

4. 整个应用只有一个$router，存储着所有组件和路由的配置信息。