Vue-初步了解vue-router的三要素:路由map 、路由视图、路由导航

时间:2020-12-12 01:49:40

安装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(...)