history
- 浏览器提供的接口 里面提供了路由的记录和一个操作路由的方法
-
go(n)：n>0 前进N n<0 后退N
-
back() ： 后退一页
-
forward() ： 前进一页
-
pushState(X,X, url) ： 加一条数据到记录中显示到url中 三个参数，url必须同源
-
replaceState() ： 替换当前的url
VUE-Router
- 首先引入
VUE VUE-Router VUE.use(vue-router) 中间件注册路由
-
let router = new Router({}) ：构造函数方式创建router
-
new Vue({router:router}) ： 在vue实例中使用vue-router
- 路由默认使用
hash的方式导航
- 路由的映射表 路由<->组件
-
<router-view></router-view> ： 路由显示的地方
-
<router-link to='/sushaod' tag='button'>sushaod</router-link> ：tag可以指定渲染为什么标签
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
})
路由的映射问题
编程式导航vue-router中的导航函数
-
this.$router(函数) go(前进&&后退) back(后退) forward(前进) push(添加) replace(替换)
this.$router.push('/sushaod')
this.$route(属性)
设置路由参数
