vueRouter 路由基礎

2021-10-06 18:35:15 字數 702 閱讀 9951

一、重要概念

1、router是路由器

2、routes是一組路由

3、route某個路由(route.query、route.params、route.hash--#後面的,包含#)

const router = new vuerouter()

new vue(,

]}

三、js方式跳轉傳參

//使用name跳轉

this.$router.push(

})this.$route.params.id

//使用path跳轉

this.$router.push(

})this.$route.query.id

四、router.addroutes實現動態路由(可用於根據不同角色新增不同路由)

let routesa = [,,

]if(role == 'a')

五、vuerouter原始碼做了什麼

1、在vue原型上新增$router、$route,所以所有vue元件例項中都有這兩個物件

2、全域性註冊了routerview和routerlink兩個元件(vue.component())

基礎 vue router實現子路由

例子一 index.js import vue from vue import router from vue router import helloworld from components helloworld import first from components first import ...

vue router路由巢狀

巢狀路由顧名思義就是路由的多層巢狀。結合vue router仿天貓底部導航欄,給元件me新增巢狀路由,也叫子路由。總共新增兩個子路由,分別命名collection.vue 我的收藏 和trace.vue 我的足跡 1 重構router index.js的路由配置,需要使用children陣列來定義子...

vue router 配置路由

vue router 配置路由 用 vue.js vue router 建立單頁應用,是非常簡單的。使用 vue.js 我們已經可以通過組合元件來組成應用程式,當你要把 vue router 新增進來,我們需要做的是,將元件 components 對映到路由 routes 然後告訴 vue rout...