tips:
所有组件都继承vue类原型
<!-- exclude里面不要随便加空格，正则表达式也是-->
1.
第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过<router-link>和<router-view>
//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 router2.
路由嵌套：
实现嵌套路由有两个步骤:创建对应的子组件, 并且在路由映射中配置对应的子路由.在组件内部使用<router-view>标签.
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>3.
路由懒加载：
// 原来导入 // 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')4.
路由传递参数：
• 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>5.
路由导航守卫：
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() // 必须调用 })6.
keep-alive:
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
