Vue-router笔记
tips:
所有组件都继承vue类原型
第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过
//1. 通过vue.use(插件),安装插件
Vue.use(VueRouter)
// 2.创建vue router对象
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes,
mode: 'history'
})
// 3.将router对象传入到Vue实例
export default router
路由嵌套：
实现嵌套路由有两个步骤:
创建对应的子组件, 并且在路由映射中配置对应的子路由.
在组件内部使用
children: [
{
path: '/',
redirect: 'news'
},
{
path: 'news',
component: Homenews
},
{
path: 'message',
component: Homemessage
}
]
// 使用：
<router-link to="/home/news">首页新闻</router-link>
<router-link to="/home/message">首页信息</router-link>
<router-view></router-view>
路由懒加载：
// 原来导入
// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from '../components/User.vue'
// 路由懒加载方式
const Home=()=>import('../components/Home.vue')
const About=()=>import('../components/About.vue')
const User=()=>import('../components/User.vue')
路由传递参数：
• params的类型:
• 配置路由格式: /router/:id
• 传递的方式: 在path后面跟上对应的值
• 传递后形成的路径: /router/123, /router/abc
• path: '/user/:userId',
<router-link :to='"/user/"+userId' >用户</router-link>
data(){
return {
userId: 'zhangsan'
}
},
• query的类型:
• 配置路由格式: /router, 也就是普通配置
• 传递的方式: 对象中使用query的key作为传递方式
• 传递后形成的路径: /router?id=123, /router?id=abc
<router-link :to="{path: '/Profile',query:{name: 'zs',age:18}}">档案</router-link>
使用：
<h3>{{$route.query.name}}</h3>
<h3>{{$route.query.age}}</h3>
路由导航守卫：
vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.
vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发
导航钩子的三个参数解析:
to: 即将要进入的目标的路由对象.
from: 当前导航即将要离开的路由对象.
next: 调用该方法后, 才能进入下一个钩子
全局导航守卫：
// 在路由中有元数据
{
path: '/user/:userId',
component: User,
meta: {
title: '用户'
}
},
// 导航守卫 前置钩子(守卫guard)
router.beforeEach((to,from,next)=>{
// 从from跳转到to
document.title=to.matched[0].meta.title
console.log(to)
next() // 必须调用
})
keep-alive:
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
