共计 3070 个字符，预计需要花费 8 分钟才能阅读完成。
VueRouter
- 装置 vue-router
- npm install vue-router –save
- 搭建框架
-
在模块化工程中应用它（因为是一个插件，所以能够通过 Vue.use() 来装置路由性能）
- 第一步：导入路由对象，并且调用 Vue.use(VueRrouter)
- 第二步：创立路由实例，并且传入路由映射配置
- 第三步：在 Vue 实例中挂载创立的路由实例
- 在 src 文件夹下手动创立 router 文件夹
- router 文件夹内创立 index.js
-
index.js 中编写
// 配置路由相干的信息 搭建框架 import VuRouter from 'vue-router' import Vue from 'vue' //1. 通过 Vue.use(插件)，装置插件 Vue.ues(VueRouter) //2. 创立 VueRouter 对象 const routes = [ ] const router = new VueRouter({ // 配置门路和组件之间的利用关系 routes: }) 将 router 对象传入到 vue 实例 export default router //3. // 将 router 对象传入到实例中 // 在 main.js 实例中 import router from '门路' router: router
应用 vue-router 的步骤
- 创立路由组件 / 在 components 文件夹内
-
配置路由映射：组件和门路映射关系
-
在 index.js 文件中
// 导入 components 中相干组件 import Home from '组件门路' import Home from '组件门路'
-
const routes = [
{path:'/home（可换）',
component:null // 一个映射关系就是一个对象
},
{
path:'/about（可换）',
component:null
}
]-
应用路由：通过 <router-link> 和 <router-view>
- 在 app.vue 中 写
-
<router-link> 相当于 a 标签
<router-link to="home"> 首页 </router-link> -
<router-view> 相当于将内容显示在 link 下面或者上面
-
路由的默认门路
- 让门路默认跳进首页并且能够被渲染
-
只有在多配置一个映射就能够了
const routes = [ { path:'/', redirect:'/home' } ] // 在 route 中又配置了一个映射 pa/th 配置的是根门路 redirect 是重定向，也就是咱们将根门路重定向到 /home 的门路下，这也就能够失去想要的后果了
router-link 补充
- tag：tag 能够指定 <router-link> 之后渲染成什么组件。<router-link to/’home’ tag=’button’> 将会被渲染成 button 按钮就
- replace：replace 不会留下 history 记录，所以指定 replace 的状况下，后退键返回不能返回到上一个页面
-
active-class：当 <router-link> 对应的路由匹配胜利时，会主动给以后元素设置一个 router-link-active 的 class，设置 active-class 能够批改默认的名称
- 在进行高亮显示的导航菜单或者底部 tabbar 时，会应用到该类
- 然而通常不会批改类的属性，会间接应用默认的 router-link-active
通过代码跳转路由
this.$router.push(‘/home’)
路由懒加载
- 用到时再加载
- 当打包构建利用时，Javascript 包会变得十分大，影响页面加载
- 如果咱们能把不同路由对应的组件宰割成不同的代码块，而后当路由被拜访的时候才加载对应组件，这样就更加高效了
- 路由懒加载的次要作用就是将路由对应的组件打包成一个个的 js 代码块
- 只有在这个路由被拜访到的时候，才加载对应的组件
-
懒加载的形式
-
形式一：联合 Vue 的异步组件和 Webpack 的代码剖析
const Home = resolve => {require.ensure(['../components/Home.vye'],() => {resolve(require('../components/Home.vue')) })}; // 老版 -
形式二：AMD 写法
const About = resolve => require(['../components/About.vue'], resolve);
-
-
形式三：ES6 中，更加简略的写法来组织 Vue 异步组件和 Webpack 的代码宰割
const Home = () => import('../components/Home.vue')
路由的嵌套应用
-
嵌套路由是一个很常见的性能
- 比方在 home 页面中，咱们心愿通过 /home/news 和 /home/message 拜访一些内容
- 一个门路映射一个组件，拜访这两个路劲也会别离渲染两个组件
-
实现嵌套路由有两个步骤：
- 创立对应的子组件，并且在路由映射中配置对应的子路由
- 在组件外部应用 <router-view> 标签
// 创立组件，比方 news，message（内容显示在首页里）// 关上 index.js
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const routes = [
path: '/home',
children; [
{
path:'news' // 子路由不须要加‘/’component:HomeNews
},
{
path:'Message' // 子路由不须要加‘/’component:HomeMessage
}
]
]
// 关上 Home.vue
<router-link to="/ome/news"> 新闻 </router-link>
<router-link to="/home/message"> 新闻 </router-link>
<router-view></router-view>
参数传递
- 传递参数次要有两种类型：params 和 query
-
params 的类型
- 配置路由格局：/router/:id
- 传递的形式：在 path 前面跟上对应的值
- 传递后造成的门路：/router/123, /router/abc
-
query 的类型
- 配置路由格局：/router，也就是一般配置
- 传递的形式：对象中应用 query 的 key 作为传递形式
- 传递后造成的门路：/router？id=123，/router?id=abc
- 应用：<router-link> 的形式和 Javascript 代码形式
导航守卫
router.beforeEach((to,from,next)) => {document.title = to.matched[0].meta.title
console.log(to)
next()}
keep-alive
- keep-alive 是 Vue 内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染
- router-view 也是一个组件，如果间接被包在 keep-alive 外面，所有门路匹配到的视图组件都会被缓存
- 用法：蕴含住 <router-view>
-
keep-alive 是 Vue 内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染
- 它们有两个十分重要的属性：
- include – 字符串或正则表白，只有匹配的组件会被缓存
- exclude – 字符串或正则表达式，任何匹配的组件都不会被缓存 <keep-alive exclude=”Home,User”> // 不能轻易加空格
- router-view 也是一个组件，如果间接被包在 keep-alive 外面，所有门路匹配到的视图组件都会被缓存
正文完