vue-router的三要素详解：路由map 、路由视图、路由导航

最新推荐文章于 2023-02-23 15:57:59 发布

VIP文章 Maybe_ss

最新推荐文章于 2023-02-23 15:57:59 发布

阅读量1.4k

点赞数

文章标签： vue.js 前端 vue

本文链接：https://blog.csdn.net/maybe_ss/article/details/122298712

版权

使用vue-router模块

使用vue-router前要先安装vue-router库

cnpm install vue-router –save

vue-router三要素:

路由map指路由与组件的映射关系；
路由视图指路由映射对应组件的渲染位置；
路由导航指可以使地址栏发生变化的导航链接。

1、路由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: {<