阅读 8

Vue-router 路由

原文:blog.csdn.net/wildye/arti…

vue-router 使用步骤 安装模块 npm install vue-router --save 1 // 引入模块 import VueRouter from 'vue-router'

// 作为 Vue 的插件 Vue.use(VueRouter)

// 创建路有实例对象 new VueRouter({ ...配置参数 }) 1 2 3 4 5 6 7 8 9 10 告诉路由渲染的位置 标签会自动匹配渲染子路由 1 功能配置

  1. hash 和 history模式 默认使用hash模式 如果需要兼容至IE9,推荐使用默认的哈希模式

切换 history 模式

new Router({ mode: 'history' }) 1 2 3 2. router-link 各种配置项 导入页面组件 import Home from './views/Home.vue' 1 配置项 new Router({ // 配置当前导航页高亮样式类 linkActiveClass: 'is-active', routes: [ { // 路径 path: '/', // 名字,推荐,因为路径可能会改动,而 name 不会 name: 'home', // 设置导向的组件页面 component: Home } ] }) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 绑定方式

home

home home home 1 2 3 4 5 6 7 自定义元素标签,默认为 a 标签 home 1 默认高亮 home 1 3. 重定向和别名 默认事件为 click 触发,但这是可以改变的

home 1 2 重定向 new Router({ routes: [ { path: '*', name: 'home'

        // 重定向
        redirect: '/home',
        redirect: { path: '/home' }
        redirect: { name: 'home' }

        // 动态设置重定向的目标
        redirect: (to) => {
            if (to.path === '1') {
                return '/home'
            } else if (to.path === '2') {
                return { path: '/home' }
            } else {
                return { name: 'about' }
            }
        }
    }
]
复制代码

}) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 别名 访问 /home 和访问 /index 时一样的,且使用别名与标签属性 to 的值一致时激活高亮 new Router({ routes: [ { path: '/inedx', alias: '/home', component: Home } ] }) 1 2 3 4 5 6 7 8 9 4. 嵌套路由的使用 精确匹配 全包含匹配(默认): 访问 /home 时 / 依然处于激活状态 精确匹配:访问 /home 时 / 不会处于激活状态

index 1 2 嵌套路由 一旦有默认子路由,那就无需在父路由里设置 name new Router({ routes: [ { path: '/home', component: Home, children: [ { path: '', // 默认子路由 /home name: 'About', component: About }, { path: 'work', // 跳转路径 /home/work name: 'Work', component: Work } ] } ] }) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 5. 命名视图 设置子路由 URL路径 相对于根路径,即去掉 home,组件嵌套不变

new Router({ routes: [ { path: '/home', component: Home, children: [ { path: '/work', // 设置/,相对与根路径 name: 'Work', component: Work } ] } ] }) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 命名视图 在同级展示多个视图(并列显示),而不是嵌套展示 1 2 new Router({ routes: [ { path: '/home', components: { default: Home, // 默认组件 slider: About // 对应 name="slider" 的视图 }, } ] }) 1 2 3 4 5 6 7 8 9 10 11 6. 滚动行为 记录滚动条位置,后退或前进后保留页面滚动位置

new Router({ /* 浏览器前进后退或切换导航时才会触发 to: 要进入的目标路由对象 from: 离开的路由对象 savePosition: 记录滚动条坐标{x,y} 点击前进后退时记录值 */ scrollBehavior: (to, from, savePosition) { // 判断地址栏是否有 hash 值 if (to.hash) { return { selector: to.hash } } // 定位页面滚动位置 return savePosition ? savePosition : {x: 0, y: 0} } }) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 7. 动态路径参数 匹配到的所有路由,全部都映射到同一个组件 路径: /user/:userId ,userId为动态路径参数 获取参数: 路由信息对象 $router.params

new Router({ routes: [ { path: '/user:userId?', // user/1 /user/2, ?:匹配1次或0次 component: User, } ] }) 1 2 3 4 5 6 7 8 对组件注入 router,router实例对象router,当前激活的路由信息对象,每个组件实例都会有 beforeRouterEnter(),进入组件前钩子函数 beforeRouterLeave(),离开组件前钩子函数 路由信息对象 path 字符串,对应当前路由的路径 params 对象,包含动态路由参数 quary 对象,URL 查询参数 hash 字符串,当前路由的 hash 值 fullPath 字符串,URL包含查询参数和 hash 的完整路径 matched 数组,包含当前路由的所有嵌套路径片段的 路由记录 name 字符串, 当前路由的名称 8. 监控 router 路由信息对象
watch: {router () { // 路径发生变化,router会重新赋值
        console.log(this.router.params) } } 1 2 3 4 5 6 9. query 字符串传参 设置 1 2 获取 this.$router.query 1 10. 导航切换过渡动画 transition 使用 提供了transition的封装组件,添加过渡动画

过渡的 CSS 类名,使用 name 属性改变类名前缀

v-enter : 定义 进入 过渡的 开始 状态 v-enter-active : 定义进入 活动 状态 v-enter-to : 定义进入的 结束 状态 v-leave : 定义 离开 过渡的 开始状态 v-leave-active : 定义离开 活动状态 v-leave-to : 定义离开的 结束状态 1 2 3 /* 开始(进入)、结束(离开)/ .v-enter, .v-leave-to { opacity: 0 } / 结束(进入)、开始(离开)/ .v-enter-to, .v-leave { opacity: 1 } / 过渡时间 */ .v-enter-active, .v-leave-active { transition: 1s } 1 2 3 4 5 6 7 8 9 10 11 12 13 过渡模式,默认为同时过渡 out-in : 当前元素先进行过渡,完成之后新元素过渡进入 in-out : 新元素先进行过渡,完成之后当前元素过渡离开 1 2 3 11. 动态设置 name 属性左右切换

HTML 1 2 3 JS export default { data () { return { names: 'L' } }, watch: { route (to, from) {
            if (to.meta.index < from.meta.index) {
                this.names = 'right'
            } else {
                this.names = 'left'
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
CSS
.L-enter,
.R-leave-to {
    transform: translateX(100%)
}
.L-leave-to,
.R-enter {
    transform: translateX(-100%)
}
.L-enter-to,
.L-leave,
.R-enter-to,
.R-leave {
    transform: translateX(0)
}
.L-enter-active,
.L-leave-active,
.R-enter-active,
.R-leave-active {
    transition: 1s
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
设置路由元信息 
在路由配置中meta可以配置一些数据,用在路由信息对象中 
访问meta中数据:route.meta new Router({ routes: [ { path: '/home', component: Home, meta: { index: 0 } }, { path: '/work', component: Work, meta: { index: 1 } }, { path: '/about', component: About, meta: { index: 2 } } ] }) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 12. 编程式导航 借助于 router 的实例方法,通过编写代码来实现导航的切换

back : 回退一步 forward : 前进一步 go : 指定前进回退步数 push : 导航到不同url,向 history 栈 添加 一个新的记录 replace : 导航到不同url,替换 history 栈中当前记录 export default { methods: { backPage () { this.router.back()
        },
        forwardPage () {
            this.router.forward() }, goPage () { this.router.go(-2)  // 退回2步
            this.router.go(3) // 前进3步 this.router.go(0)   // 刷新当前页面
        },
        pushPage () {
            this.router.push('/home') // 新纪录 }, replacePage () { this.$router.replace('/home') // 替换纪录 }, } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 13. 全局钩子函数 导航发生变化时,导航钩子主要用来拦截导航,让它完成跳转或取消

钩子函数 router全局:beforeEach、afterEach 单个路由:beforeEnter 组件中:beforeRouteEnter、beforeRouteUpdate 、beforeRouteLeave

钩子函数接收的参数 to : 要进入的目标 路由对象 到哪里去 from : 正要离开导航的路由对象 从哪里来 next : 用来决定跳转或取消导航

let router = new Router({ routes: [ { path: '/home', component: Home, beforeEnter: (to, from, next) { // 单个路由 next() } } ] })

// 进入导航前 router.beforeEach((to, from, next) => { // router全局 next(false) // 取消导航 to.meta.login ? next('/login') : next() })

// 进入导航后 router.afterEach((to, from, next) => { window.document.title = to.meta.title || 'miaov' }) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 14. 组件级钩子函数 export default { data () { return { test: '改变前' } }, beforeRouteEnter (to, from, next) { // 进入导航, 比 beforeCreate 先执行 next((vm) => { // vm : 当前组件实例 vm.test = '改变了' }) }, beforeRouteUpdate (to, from, next) { // 二级导航更新 }, beforeRouteLeave (to, from, next) { // 离开导航 } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 15. 滚动动画 npm i tween.js --save 1 import TWEEN from 'tween.js'

export default { // 进入导航后自动到哈希位置 beforeRouteEnter (to, from, next) { next(() => { vm.animate(to) }) }, // 路由更新后更新哈希位置 beforeRouteUpdate (to, from, next) { this.animate(to) next() }, methods: { animate (to) { function animateFunc () { requestAnimationFrame(animateFunc) TWEEN.update(time) } if (to.hash) { // 获取锚点元素 let el = document.getElementById(to.hash.slice(1)) // 获取容器元素 let doc = document.getElementsByClassName('doc')[0] if (el) { animateFunc() new TWEEN.Tween({ number: doc.scrollTop // 起始位置 }) .to({ number: el.offsetTop // 目标位置 }, 500) .onUpdate(function() { doc.scrollTop = this.number.toFixed(0) }) .start() } } } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 16. 利用 webpack 实现懒加载 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件

webpack代码分割功能 const Header = (resolve) => { // 代码分块(依赖, 回调, [chunk名字]) return require.ensure([], () => { // 载入组件 resolve(require('@/components/Header')) }, 'user') }

const Footer = (resolve) => { return require.ensure([], () => { resolve(require('@/components/Footer')) }, 'user') // webpack会将chunk名称相同打包到一个文件 }

const Aside = (resolve) => { // import 方式相对的只能打包一个文件 return import('@/components/Aside') }

export default { // vue 中 components 也可以传递函数 components: { Header, Footer, Aside } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 17. 服务器配置 build/index.js module.exports = { build: { assetsPublicPath: '/dist/' } } 1 2 3 4 5 Nginx配置 location / { root /home/应用跟目录; try_files uriuri/ /index.html =404; } 1 2 3 4 Appache配置 apache → httpd.conf LoadModule rewrite_module modules/mod_rewrite.so

AllowOverride all

AllowOverride all 1 2 3 4 5 6 7 在 www 下新建 .htaccess 文件,内容如下:

RewriteEngine On RewriteBase / RewriteRule ^index\.html$ [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /dist/index.html [L] ———————————————— 版权声明:本文为CSDN博主「凝弧」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/wildye/article/details/81161354
关注下面的标签,发现更多相似文章
评论