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.productductionTip = false//2、用全局方法use()来注册使用vue-routerVue.use(VRe(VRouter);//4、实例化全局router let router=new VRouter({ //以下是路由map routes:[ { path:'/index', component:index }, { path:'/category', component:category } ]});new Vue({ el: '#app', router, //3、注册组件 components: { App,VRouter}, template: '<App/>'})

二.路由视图

<router-view></router-view>

三.路由导航

1.使用<router-link></router-link> 创建a标签来定义导航链接

<router-link :to="{path:'index'}"></router-link>

2.使用router.push方法来实现跳转

router.push({ path: 'goodslist' } )

觉得有用的记得点歌赞哦!谢谢....