Vue配置 |
您所在的位置：网站首页 › view-router › Vue配置 |
Vue配置
|
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配置 在引入页面/组件时，可以按需引入组件，这样的话就不会第一次进入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 例：缓存指定路由 使用 include 使用 exclude来指定该组件不需要缓存部分路由缓存 使用 meta 在路由中添加下面属性 meta: {keepAlive: true // 缓存} meta: {keepAlive:false // 不缓存 } 例： { path:'/Distribution', name:'Distribution', component: Distribution, meta: {keepAlive: true // 缓存} } 然后在页面 //当前进入的路由 meta里面 keepAlive为true时走这里 //当前进入的路由 meta里面 keepAlive为false时走这里 下面 if 判断进行了取反处理路由切换特效 然后再全局样式中定义切换的特效 /* 渐入渐出效果 */ .switch-enter-active, .switch-leave-active transtion: opacity .5s .switch-enter, .switch-leave-to opacity: 0 |
【本文地址】