/**
* Vue-router 基本用法
* npm install --save vue-router
*/
1, Router实例对象
const RouterInstance = new Router({
/**
* mode 不设置默认使用 hash
* 就是使用#来设置路径
* history 模式通过/来设置路径
* 如果URL匹配不到任何的静态资源,则应该返回同一个index，
* 这个页面就是你 app 依赖的页面
*/
mode: 'history',
routes: Routers, // 路由对象
linkActiveClass: 'active-link', // 路由被激活
linkExactActiveClass: 'extract-active-link', // 路由完全匹配
scrollBehavior(to, from, savePostrion) {
// 页面路径跳转的时候滚动的行为
// to
if (savePostrion) {
return savePostrion;
} else {
return { x: 0, y: 0 }
}
},
// 下面这几个属性基本用不到
// fallback: true, // 不支持history前端路由的时候。自动设置到hash 如果不需要可以设置成false
// parseQuery(qyery) {}, // 把接受的参数 转换成object
// stringifyQuery(obj) {} // 把接受的参数 转换成string
})
2, 路由对象的配置
const Routers = [{
path: '/index/:id', // 指定当前匹配的路径 // /index/xxx
name: 'index', //
component: Index, // 映射的组件
children: [{ // 子组件
path: '/one',
component: One
}],
meta: { // 保存路由的信息 通过this.$route
title: 'this is title',
description: '关键字'
},
alias: '/component/index', // 别名 //作用是将UI与URL任意的结合
beforeEnter: (to, from, next) => { // 路由导航
// ...
console.log('组件路由');
next();
},
/**
* props传递参数 通过props把参数传递到组件内部。
* 布尔模式
* props: { default: true, sidebar: false }
* 对象模式
* props: { newsletterPopup: false }
* 函数模式
* props: (route) => ({ query: route.query.q })
*/
props: true,
},
// 重定向
/**
* redirect 可以是以下的值：
* 1，字符串
* '/b'
* 2，可以是一个命名视图
* {name:'one'}
* 3,可以是方法
* to => {
* // 方法接受 目标路由 作为参数
* return 重定向的字符或者路径对象
* }
*/
{
path: '*', // 指定当前匹配的路径,不存在重定向到首页
redirect: '/index'
},
{
path: '/one/:id', // /index/xxx
name: 'one',
component: One,
},
{
path: '/two',
name: 'two',
component: Two,
},
{ // 命名视图
path: '/',
components: {
default: Index,
one: One,
two: Two
}
}
];
3,导航守卫
先执行全局导航守卫，然后执行路由配置导航守卫，最后执行组件内部导航守卫。
// 全局导航守卫---全局前置守卫
RouterInstance.beforeEach((to, from, next) => {
console.log('全局导航守卫---全局前置守卫');
next();
});
RouterInstance.beforeResolve((to, from, next) => {
console.log('全局导航守卫---beforeResolve');
next();
});
RouterInstance.afterEach((to, from) => {
console.log('全局导航守卫---全局后置');
});
//路由配置导航守卫、
beforeEnter: (to, from, next) => {
// ...
console.log('组件路由');
next();
},
、// 组件内部导航
4， 命名视图beforeRouteEnter(to, from, next) {
// ...
// 在渲染该组件的对应路由被confirm前调用
// 组件还没有被创建不能访问this
console.log("组件内部导航守卫--beforeRouteEnter");
next();
},
beforeRouterUpdate() {
// ...
// 在当前路由改变，但组件被服用的时候调用 可以访问this // 组件更新 mounted函数不会执行。
console.log("组件内部导航守卫--beforeRouterUpdate");
next();
},
beforeRouteLeave(to, from, next) {
// ...
//导航离开该组建时，路由调用。可以方位this
console.log("组件内部导航守卫--beforeRouteLeave");
next();
}
<router-view></router-view>
<router-view name="one"></router-view>
<router-view name="two"></router-view>
{ // 命名视图
path: '/',
components: {
default: Index,
one: One,
two: Two
}
}
5，router-link 示例
<router-link to="/index">to-index</router-link>
<router-link to="/one/123">to-one</router-link>
<!--
router-link 默认渲染出来是a标签
tag 指定渲染成什么标签
replace 不会留下history记录，
使用后导航后不能用后退键返回上一个页面
active-class
router-link 对应路由匹配成功时候。会自动添加active-class
-->
<router-link :to="{name: 'one'}" tag="button">to-one-name</router-link>
<router-link to="/one" tag="button">to-one-tag</router-link>
<router-link to="/one/123" replace>to-one-replace</router-link>
<button @click="handlerRouter">通过js跳转路由</button>
handlerRouter() {
/**
* replace 不会向history添加记录，而是替换当前的history
*/
// this.$router.replace("/one/123");
/**
* 类似于 window.history.go();
*/
// this.$router.go(-1);
/**
* 编程式导航
* push() 参数可以是字符串 可以是对象
* replace() 不会添加记录和push使用方法一样
* go() 参数是整数
*/
// this.$router.push("/index");
// this.$router.push({
// path: "/index"
// });
// this.$router.push({
// name: "index"
// });
this.$router.push({
name: "one",
params: { id: 666 }
});
}
$ router 是vue-router的实例对象。是Vue的全局对象
$ route 是一个路由组件的对象，每一个组件都有一个$route;主要包含name,path,params,query等属性