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 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染