vue项目中使用vue-router

说明

此处仅做简单记录，并没有做详细的整理。

 

操作步骤

1、通过以下命令安装路由，如下：

npm install vue-router --save-dev

2、在src根目录下新建router文件夹，然后新建router.js文件，输入以下代码：

import Vue from 'vue';
import Router from 'vue-router';

import DataSource from '../components/system/content/dataSource/DataSource.vue';

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            component: DataSource
        }
    ],
    mode: 'history'
});

3、然后在main.js中引入这个router.js文件，如下：

 

4、在相应的容器中插入<router-view></router-view>和<router-link to='/test'></router-link>标签来配置路由。

 

另一种方法

 

在配置好<router-view>之后搭配this.$router.push()方法来实现点击跳转，具体可参看官网文档。