正文
Vue-初步了解vue-router的三要素：路由map 、路由视图、路由导航
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
安装vue-router模块
使用vue-router前要先安装vue-router库
cnpm install vue-router –save
使用vue-router
vue-router有三个要素：路由map 路由视图 路由导航。路由map指路由与组件的映射关系；路由视图指路由映射对应组件的渲染位置；路由导航指可以使地址栏发生变化的导航链接。
一、路由map
import Vue from 'vue'
import App from './App'
//1、在入口文件main.js里引入
import VRouter from 'vue-router'
Vue.config.productionTip = false
//2、用全局方法use()来注册使用vue-router
Vue.use(VRouter);
//4、实例化全局router
let router=new VRouter({
//以下是路由map
routes:[
{
path:'/apple',
component:Apple
},
{
path:'/banana',
component:Banana
}
]
});
new Vue({
el: '#app',
router,
//3、注册组件
components: { App,VRouter},
template: '<App/>'
})
二、路由视图
<router-view></router-view>
三、路由导航
方法1：使用<router-link> 创建 a 标签来定义导航链接
<router-link :to="{path:'apple'}"> to apple</router-link>
<router-link :to="{path:'banana'}">to apple</router-link>
方法2：使用 router.push 方法
router.push({ path: 'apple' })
点击 <router-link :to="..."> 等同于调用 router.push(...)。
更详细的关于 <router-link :to="...">和 router.push(...)的知识总结在 Vue-详解设置路由导航的两种方法：<router-link :to="..."> 和router.push(...)
