VUE Router路由的使用

安装：项目路径下命令行输入：

cnpm install vue-router --save-dev

router

目录下新建index.js文件专门用以管理路由

（1）首先需要导入需要配置路由的组件：

import Content from '../components/ContentVue'

（2）导入Router，并显示使用：

（3）配置并导出组件的路由

export default new VueRouter({

routes:[

{

//访问路径

path: '/content',

//跳转的组件

component:Content

}]

注意：关键字为【routes】

path表示配置访问路径，以 / 开头；

component表示路径实际访问的组件；

(4)在main.js文件中添加配置的路由变量

一个项目配置唯一路由器

new Vue({

el: '#app', //js文件里vue实例只能绑定html页面的对象

//配置路由

router,

components: { App },

template: '<app/>'

});

（5）App.vue文件中使用配置好的路由路径进行组件跳转

关键字【router-link】【router-view】

<router-link to="/wwb">wwb</router-link>

<router-view></router-view> //放组件内容的地方