Vue Router使用笔记

Vue Router 是 Vue.js 官方的路由管理器。

使用Vue Router,我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

简单来说就是，定义好路由，然后使用<router-view>标签指定渲染路由的地方。

我使用的是webpack模块化工程，需要先通过npm或yarn安装路由。

具体使用过程如下：

1、安装路由：

npm install vue-router
或者
yarn add vue-router

2、配置路由文件

新建router.js文件，首先需要引用路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);//必需

然后导入路由组件：

import login from '@/views/login';
import index from '@/views/index';

一开始使用require加载没有效果，后来发现，若使用require导入，则写法为：

const login = require('@/views/login/login.vue').default;
const home = require('./views/home/home.vue').default;

定义路由对象：

其中，path:'/'代表的是默认路由，若不设置<router-link>或不调用this.$router.push('...')，可以默认跳转到这个路由。

const routes = [
{
path:'/',//默认路由
components:login,
redirect:'/login'
},
{
path:'/login',
component:login
},
{
path:'/index',
component:index
}
];
const router = new VueRouter({  //VueRouter为导入路由时定义的名字
routes    //名字必须是routes，不能写错，否则会不起作用
})

导出路由对象：

export default router;

3、在main.js文件中引用路由：

......//此处省略其他引用内容
import router from './router';

var vue = new Vue({
router,
render:h=>h(App)
}).$mount('#app);//若不使用el属性，必须调用vm.$mount方法将vue实例挂载到元素上

4、指定渲染路由的地方

在App.vue组件模板中添加<router-view>标签，如下：

<template>
<div>
    .....//其他内容
    <router-view></router-view>
</div>
</template>

运行之后即可显示默认路由login组件的内容了。