[vue router官方文檔](https://router.vuejs.org/zh/)
完整router/index.js在最后
**component: () =>
import('@/components/login')是路由懶加載方式**
[官網路由懶加載](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97)
# 動態路由
router/index.js 中配置
~~~
{
// id 為自定義,可根據自己的情況更改 如 '/hello/:name
path: '/hello/:id',
component: () =>
import('@/components/router/hello')
}
~~~
html使用
~~~
<ul>
<li>
<!-- "/hello/1" 會匹配 index.js中的 '/hello/:id' -->
<router-link to="/hello/1">Go to hello1</router-link>
</li>
<li>
<router-link :to="path='/hello/2'">Go to hello2</router-link>
</li>
<li>
<router-link :to="path='/hello/3'">Go to hello3</router-link>
</li>
<li>
<router-link to="/hello/4">Go to hello4</router-link>
</li>
</ul>
~~~
或者在方法中使用
~~~
this.$router.push({
path: '/hello/2'
});
~~~
可在動態路由對應的頁面獲取 :id 的參數
獲取URL中/hello/:id 中的id的結果,使用this.$route.params.id獲取
:id是自定義的,用于獲取時使用 '/hello/:name' 使用this.$route.params.name獲取
# 嵌套路由
router/index.js 中配置
在需要使用嵌套子路由的路由里使用 children,將子路由配置在children
子路由會渲染在父路由html中的router-view的位置
~~~
{
path: '/router',
component: () =>
import('@/components/router/routerMain'),
// 嵌套子路由
children: [
{
// id 為自定義,可根據自己的情況更改 如 '/hello/:name
path: '/hello/:id',
component: () =>
import('@/components/router/hello')
}
]
}
~~~
父路由頁面html中要渲染子頁面的地方配置router-view
展示渲染結果
# router-link路由
HTML使用
~~~
<router-link to="/hello">Go to hello4</router-link>
~~~
會跳轉到router/index.js中的 path為 '/hello' 的路由
router-link默認解析為a標簽
# 方法中使用路由
除了使用 <router-link> 創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現。
~~~
router.push(location, onComplete?, onAbort?)；
// 項目中使用
this.$router.push({
path: '/routerQuery',
query: {id: id} // 路由傳參,后邊有介紹
});
~~~
**注意**：在 Vue 實例內部，你可以通過 $router 訪問路由實例。因此你可以調用 this.$router.push。
| 聲明式 | 編程式 |
| --- | --- |
| `<router-link :to="...">` | `router.push(...)` |
例如:
點擊按鈕,觸發方法進行跳轉路由
# 重定向
重定向使用 redirect
本例當 瀏覽器url為 http://localhost:8085/#/ 時會自動轉到http://localhost:8085/#/router
# 路由傳參
第一種路由傳參 (query) 參數顯示在url中,使用this.$route.query 獲取傳參對象
例如 :
~~~
this.$router.push({
path: '/routerQuery',
query: {id: id, val: this.banner}
});
// 對應頁面使用 this.$route.query.id 獲取傳的 id值
~~~
第二種路由傳參 (params需要在路由中配置name名稱),params 不會將參數顯示在url中,刷新頁面值丟失,name對應 index.js中的路由 name值
使用this.$route.params 獲取傳參對象
例如 :
~~~
this.$router.push({
name: 'routerQuery',
params: {id: id, val: this.banner}
});
// 對應頁面使用 this.$route.params.id 獲取傳的 id值
~~~
動態路由的 :id 也是傳參
**query或 params在 router-link和 this.$router.push 中使用方式一致**
router-link 中使用 query或 params進行傳參
~~~
// 第一種傳參 query
<h2>
<!-- router-link渲染為a標簽 -->
<!--渲染結果
<a data-v-3e708a56=""
href="#/routerQuery?id=1&val=router-link%E5%8F%82%E6%95%B0"
class="">router-link 路由</a>-->
<router-link :to="{path:'/routerQuery',query: {id:1,val:'router-link參數' }}">router-link query傳參路由</router-link>
</h2>
// 第二種傳參 params
<h2>
<!-- router-link渲染為a標簽 -->
<router-link :to="{name:'routerParams',params: {id:1,val:'router-link參數' }}">
router-link params傳參路由</router-link>
</h2>
~~~
# 匹配優先級
有時候，同一個路徑可以匹配多個路由，此時，匹配的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高。
# 完整router/index.js
~~~
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
redirect: {
path:'/router'
},
component: () =>
import('@/components/login')
}, {
path: '/resume',
name: 'resume',
component: () =>
import('@/components/resume/resume')
}, {
path: '/router',
component: () =>
import('@/components/router/routerMain'),
// 嵌套子路由
children: [
{
// id 為自定義,可根據自己的情況更改 如 '/hello/:name
path: '/hello/:id',
component: () =>
import('@/components/router/hello')
}
]
}, {
path: '/routerQuery',
name: 'routerQuery',
component: () =>
import('@/components/router/routerQuery')
}, {
path: '/routerParams',
name: 'routerParams',
component: () =>
import('@/components/router/routerParams')
}, {
path: '/watch',
component: () =>
import('@/components/demo/watch-computed')
}, {
path: '/class',
component: () =>
import('@/components/demo/class-style')
}]
})
~~~
