©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>1. 初始化vue-router
首先安装vue-router，并创建名为router的文件夹，在下新建一个index.js
npm i vue-router
<>2. vue-router的简单配置
首先引入vue和vue-router
然后vue.use引入该插件
创建个常量并按一些规律来引入页面，也就是.vue文件
import Vue from 'vue' import VueRouter from 'vue-router' import home from
'./home.vue' // 引入组件 import login from './login.vue' Vue.use(VueRouter) const
routes= [ { path: '/home', component: home }, { path: '/login', component: login
} ] const router = new VueRouter({ // 把常量routes放进来 routes }) // 导出router export
default router
在main或中文件中引入该文件并在new Vue中放入就完成了，这就是最简单router配置
<>3. 配置自己要求的router
在引入页面/组件时，可以按需引入组件，这样的话就不会第一次进入vue的项目时会引入全部的组件，导致首页白屏时间过长并且打包时也不会打包成一个js文件，可以需要显示哪个组件时，在引入。
// 还是已刚刚的例子修改 const routes = [ { // 每次进入默认进入该路由 path: '/', //
redirect属性，如果是默认路由，则跳转 redirect: '/home', // 可以为路由进行命名,可以通过name进行路由跳转 name: '',
// 可以保存路由里的一些信息，相当于html里的meta元信息,你可以通过$route里来获取 meta: { }, //
该路由下展示的子路由，必须在路由组件中写router-view标签才能展示 children: [ { path: '', component: '' } ]
}, { path: '/home', //component: home // 按需导入组件，app.js分块打包 component: () =>
import('./home.js) }, { path: '/login', //component: login //
当然你也可以给component来实现路由组件的懒加载功能 component: (resolve) => { require(['./login'],
resolve) }, } ]
<>4.vue-router的公共配置
const router = new VueRouter({ // 该属性用于去掉url中的哈希(/#/) mode: 'history', //
该属性在path路径加个基路径 base: '/base/', // 给全局的router-link被激活时写样式用到的属性， linkActiveClass:
'', linkExactActiveClass: '', // 保存进入过路由的滚动位置 scrollBehavior (to, from,
savedPosition) { to // 跳转的路由 from // 从哪跳转的路由 savedPosition //
如果该路由进入过并滚动，该参数会保存滚动的位置信息 // 我们通常会这样设置 if (savedPosition) { return savedPosition
} }, // 并不是所有的浏览器都支持vue形式的路由跳转，该属性不用设置自动生效就是为了让不同的浏览器支持vue形式的路由跳转。 fallback:
true, // 该方法会自动获取路径中的query参数，它会接收个参数是字符串 parseQuery (query) { }, //
该方法会自动获取路径中的query参数，它会接收个参数是对象 stringifyQuery (obj) { } })
<>5.路由缓存和路由切换动画
在上面中我们说了router-view标签，我们可以给router-view写一些属性
缓存全部路由
在router-view外包裹keep-alive 例： <keep-alive> <router-view></router-view> </keep-
alive>
缓存指定路由
使用 include <keep-alive include="该路由的name名称"> <router-view></router-view> </keep
-alive> 使用 exclude来指定该组件不需要缓存 <keep-alive exclude="该路由的name名称"> <router-view></
router-view> </keep-alive>
部分路由缓存
使用 meta 在路由中添加下面属性 meta: {keepAlive: true // 缓存} meta: {keepAlive:false // 不缓存
} 例： { path:'/Distribution', name:'Distribution', component: Distribution, meta:
{keepAlive: true // 缓存} } 然后在页面 <keep-alive > //当前进入的路由 meta里面
keepAlive为true时走这里 <router-view v-if="$route.meta.keepAlive"></router-view> </
keep-alive> //当前进入的路由 meta里面 keepAlive为false时走这里 下面 if 判断进行了取反处理 <router-view v-
if="!$route.meta.keepAlive"> </router-view>
路由切换特效
<!-- name用于全局样式的头名，作用于每一个路由的切换 当你包裹住单个组件，就可以作用于单个组件的切换特效 --> <transtion name="
swtich"> <router-view></router-view> </transtion>
然后再全局样式中定义切换的特效
/* 渐入渐出效果 */ .switch-enter-active, .switch-leave-active transtion: opacity .5s
.switch-enter, .switch-leave-toopacity: 0