一、配置路由
在配置路由之前，需要完成两步配置，router.js中引入模块并挂载，main.js中导入路由并注册路由，这里默认两个文件在同一目录下，可根据实际情况进行相应的调整。
//router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//main.js
import router from './router'
new Vue({
el: '#app',
components: { App },
template: '<App/>',
router
})
//app.vue
<template>
<div id="app">
//相当于路由的出口，可以理解为占位符
//需要注意：父组件必须有路由出口，负责显示子路由
<router-view></router-view>
</div>
</template>
二、路由模块实现页面跳转的三种方式。
- 修改地址栏实现页面跳转
//router.js
//引入Page1和Page2组件
import Page1 from './components/Page1.vue'
import Page1 from './components/Page2.vue'
export default new Router({
mode:'history',
routes:[
//在router.js文件中配置路由的匹配规则。
//在浏览器中输入path属性对应的路径，渲染component组件
{path:'/page1',component:Page1},
//动态传参
{path:'/page2/:id/:msg',component:Page2,name:'page2'},
//路由重定向，访问根路径，重定向到page1页面
{path:'/',redirect:'/page1'}
})
- 命名式导航：router-link
//app.vue
//to后面传入指定路径
//router-link默认渲染成a标签，用tag可修改标签类型
<router-link to="/page1" tag="li">Page1</router-link>
- 编程式导航：this.$router.push()
//Page1.vue
<template>
<button @click="gotoPage2()"></button>
</template>
<script>
export default{
methods:{
gotoPage2(){
//该方法会向history添加一条新纪录
//参数可以是一个字符串路径，或者一个描述地址的对象
this.$router.push('/page2')
this.$router.push({path:'/page2'})
//name对应router.js中组件name值,params里的属性与router.js中path的动态参数一致，等同于/page2/1/vuejs，可以通过$route.params获取
this.$router.push({name:'page2',params:{id:1,msg:'vuejs'}})
}
}
}
</script>
三、route与router的区别
router为路由的实例对象，包括了路由常用的方法，如$router.push()
route是路由信息对象，可以通过$route.属性的方式进行访问。
$route.path对应当前的路径$route.params对应当前的参数 形式为key value组成的对象$route.query对应查询参数 比如?foo=bar形式同上$route.name对应路由的名字
