history
- 瀏覽器提供的接口 里面提供了路由的記錄和一個操作路由的方法
-
go(n)：n>0 前進(jìn)N n<0 后退N
-
back() ： 后退一頁
-
forward() ： 前進(jìn)一頁
-
pushState(X,X, url) ： 加一條數(shù)據(jù)到記錄中顯示到url中 三個參數(shù)，url必須同源
-
replaceState() ： 替換當(dāng)前的url
VUE-Router
- 首先引入
VUE VUE-Router VUE.use(vue-router) 中間件注冊路由
-
let router = new Router({}) ：構(gòu)造函數(shù)方式創(chuàng)建router
-
new Vue({router:router}) ： 在vue實例中使用vue-router
- 路由默認(rèn)使用
hash的方式導(dǎo)航
- 路由的映射表 路由<->組件
-
<router-view></router-view> ： 路由顯示的地方
-
<router-link to='/sushaod' tag='button'>sushaod</router-link> ：tag可以指定渲染為什么標(biāo)簽
export default new Router({
//mode:'history'
routes: [
{
path: '/',
component: () => import('./views/index/index.vue'),
redirect: '/login',
children: [
{
path: 'login',
component: () => import('./components/login/login.vue')
},
{
path: 'home',
component: () => import('./components/home/home.vue')
},
]
},
{
path: '/*',
redirect: '/login',
//component: () => import('./views/index/index.vue'),
}
],
linkActiveClass:'active' //自定義選中樣式 .active
})
路由的映射問題
編程式導(dǎo)航vue-router中的導(dǎo)航函數(shù)
-
this.$router(函數(shù)) go(前進(jìn)&&后退) back(后退) forward(前進(jìn)) push(添加) replace(替換)
this.$router.push('/sushaod')
this.$route(屬性)
設(shè)置路由參數(shù)
