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

最新推荐文章于 2024-06-26 09:40:00 发布

转载最新推荐文章于 2024-06-26 09:40:00 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tabCtrlShift/p/9163156.html

文章标签：

#javascript #ViewUI

本文详细介绍如何在Vue项目中配置和使用vue-router，包括安装vue-router模块、定义路由映射、渲染路由视图及创建导航链接的方法。

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

转载于:https://www.cnblogs.com/tabCtrlShift/p/9163156.html