vue-router 的配置和使用
安裝
- cnpm install vue-router --save
- 引入
import vuerouter from vue-router - 使用
vue.use()
配置路由
1、建立組建。 引入組建
import VueRouter from 'vue-router';
Vue.use(VueRouter);
2、定義路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
3、例項化
const router = new VueRouter({
routes // (縮寫) 相當於 routes: routes
})
4、掛載
new Vue({
el: '#app',
router,
render: h => h(App)
})
5、頁面引入
使用<router-view></router-view>元件所載入的地方
------------------------------------------------------------------------------
使用
<router-link to="指定連結"> 表示路由的跳轉，預設會被渲染成一個 `<a>` 標籤
找不到路由時預設載入路由，在配置路由的地方{path:'*',redirect:'/x'}
------------------------------------
不同路由傳值
A動態路由：
1、配置動態路由{path:/x/:id}
2、在鏈過去的頁面使用this.$route.param獲取動態路由的值
Bget傳值：路徑?id=123
this.$route.query可以以物件的方式直接獲取
兩個獲取的結果一樣
——————————————————————————————
頁面跳轉方式：
1、router-link
2、程式設計式導航（js跳轉頁面）：
this.$route.push({path:'x'})
3、命名路由，通過name跳轉
hash改為history模式，history模式要結合後端配置
-------------------------------------
路由的巢狀/父子路由
1、配置路由 。 2、父路由裡面配置子路由顯示的地方