码迷,mamicode.com
首页 > 其他好文 > 详细

vue 路由(1)

时间:2019-04-17 15:16:55      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:npm   技术   vue   bar   变化   png   use   app   pat   

路由的使用  (5步)

1.首先安装路由  npm install  vue-router
2.引入 vue-router

import VueRouter from ‘vue-router‘

3.使用router

Vue.use(VueRouter )

创建实例

const router = new VueRouter({

  routers

(routers:routers) //注意属性必须是routers

})

全局使用router

const app = new Vue({

router}).$mount(‘app‘)

2.我们可以访问它this.$router以及this.$route任何组件内部的当前路由:

技术图片

技术图片

3.动态路由匹配

/user/:id

匹配  /user/foo    /user/bar

技术图片

因为会匹配到相同的组件,所以不会重新调用生命钩子,如果监听变化的话

技术图片

 

 捕获所有的404未找到路线

{path:‘*‘

component:404组件

}

路由的匹配优先级是,路由定义的越早,优先级越高

 

vue 路由(1)

标签:npm   技术   vue   bar   变化   png   use   app   pat   

原文地址:https://www.cnblogs.com/joer717/p/10723594.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!