vue-router路由讲解
此⽂章⽤来系统讲解vue-router路由
1. 安装
只介绍npm安装
npm install vue-router --save 项⽬所需依赖
在main.js或者app.vue中导⼊
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
现在你就可以开始使⽤vue-router了
2. 结构
先来简单的了解⼀下使⽤的结构，⽅便后⾯学习
<router-link to="/foo">Go to Foo</router-link> 相当于a标签
<router-view></router-view> 这时⽤来渲染匹配到的路由组件的
下⾯就是具体的路由设置了
const app = new Vue({
router: new VueRouter({
routes: [
{path: '/foo',component: Foo} //匹配到路由'/foo'后渲染组件Foo
]
})
}).$mount("#app")
很简单吧
3. 动态路由匹配
说简单点，就是不同的路由值，访问同⼀个组件
例如：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
在 '/user/' 后⾯跟个 :id 表⽰这时可选的，就是说不管id是啥，都可以访问User组件
并且这个id存放在this.$route.params中，并且可以有多个这样的可选值
注意点: 在不同的路由值之间切换访问相同的组件，是不会重复渲染的，但是可以通过watch来做出响应
const User = {
watch: {
'$route' (to,from) {
// 对路由变化做出响应
}
}
}
// 有没有觉得这个写法挺怪的，管他呢，能⽤就⾏O(∩_∩)O哈哈~
4. 嵌套路由
嵌套路由很简单，就是匹配到某个路由值，渲染到⼀个组件，这个组件内部还有router-view，这时可以传递第⼆段路由值，加以匹配，如果不传递，可以设置⼀个空的⼆段路由值例⼦如下:
const router = new VueRouter({
routes: [{
path: '/user/:id',component: User
}]
})
/user/demo 这个路由值，可以匹配到User组件，如果User组件是如下的
const User = {
template: `
<router-view></router-view>
`
}
那么需要对路由配置做如下修改
const router = new Router({
routes: [
{path: '/user/:id',component: User,
children: [
{path: '',component: UserHome},
{path: 'profile',component: UserProfile}
]
}
]
})
5. 编程式导航
简⽽⾔之，就是，使⽤js来实现router-link的功能
使⽤ router.push ，此⽅法和router-link⼀模⼀样，回产⽣浏览记录，有如下⼏种形式，和router-link是等价的
router.push('home')
router.push({path: 'home'}) // 和上⾯等价
router.push({name: 'user',params: {userId: 123}}) // 这个是命名路由，后⾯讲
router.push({path: 'register',query: {plan: 'private'}}) // '/register?plan=private'
react router 和vue router使⽤place(location)
和router.push相似，只不过这⾥不会产⽣浏览记录，没卵⽤
使⽤(n)
6. 命名路由
命名路由是⽤来给懒⼈⽤的，给router-link传递to属性，使⽤path很长，很难写，所以，起个名字，⽅便写
当某个路由配置是
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
正常⼈是这样访问的 <router-link :to="/user/123"></router-link>
懒⼈是这样访问的 <router-link :to="{name: 'user',params: {userId: 123}}"></router-link>
咦。。。，好像还要多输⼊⼏个字符，不对，这是⽤的
7. 命名视图
这个玩意⼉就是当匹配到⼀个路由值，同时渲染多个组件，很简单，看下⾯demo
<router-view></router-view> //这个没有起名的默认就是 default
<router-view name="a"></router-view>
<router-view name="b"></router-view>
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
// 这样同时就渲染出 Foo,Bar,Baz 三个组件了
8. 重定向和别名
这两个概念也是很简单的
重定向就是当访问⼀个路由值，定向到另外⼀个路由值，此即以假乱真，简单demo如下
const router = new VueRouter({
routes: [
{path: '/a',redirect: '/b'}
]
})
别名就是起个其它的名字，其实⽅法的还是这个路由
const router = new VueRouter({
routes: [
{path: '/a',component: A,alias: '/b'}
]
})
9. HTML5 History模式
这部分内容也是专⽤，就是把url中的/#去掉，变好看⼀点，需要把其他不符合要求的路由值定位到主页上来，要不然就直接404，官⽹说这个功能要后台来实现，不过我觉得，可以直接⽤路由钩10. 导航钩⼦
这个功能很强⼤，可以在进⾏导航的过程的各个时间点做处理，很吊的
有全局的，单个路由的，组件的
1.先来看个全局的钩⼦，注册⼀个全局的before钩⼦
const router = new VueRouter({...});
router.beforeEach((to,from,next) => {
// 可以注册多个before，多个before之间是异步的，但是导航必须等到这些钩⼦执⾏完成，才开始
// to ⽬标路由对象
// from 当前路由对象
// next 有如下⼏种⽤法
// next() 执⾏下⼀个钩⼦函数，没有钩⼦，则to到⽬标路由
// next(false) 不to了，直接留在from这个路由
// next('/') 不管这个to了，另了⼀个to
// next⽅法必须调⽤，不调⽤就是死循环，⼩⼼你电脑内存爆了
// 记得刚开始学这个，我差点把电脑砸了
})
注册⼀个after钩⼦，这个作⽤不⼤，毕竟路由都跳转了，唯⼀的作⽤就是来看看⽽已
router.afterEach(route => {
// ...
})
2.单个路由的
直接上demo了吧，简单
const router = new VueRouter({
routes: [{
path: '/foo',
component: Foo,
beforeEnter: (to,from,next) => {
//...
}
}]
})
3.组件内的
这个也简单，不过⽐上⾯两个稍有点区别，上demo吧
const Foo = {
template: '...',
beforeRouteEnter (to,from,next) {
// 这⾥不能直接访问当前实例this，因为实例还没有渲染，不过可以通过next来访问
next(vm => {
// ...
})
},
beforeRouteUpdate (to,from,next) {
// 多个路由值访问同⼀个组件，来回切换，组件不会刷新，那么上⾯的这个钩⼦就没有了，此时这个钩⼦登场
},
beforeRouteLeave (to,from,next) {
// 顾名思义，不介绍了
}
}
11. 路由元信息
这玩意⼉就是⼀个flag，⽤于遍历的时候到特殊的路由，⽤处很⼩，这⾥不介绍了，感兴趣⾃⼰查去
12. 过渡动效
就是在切换路由的时候展⽰动画，如果你懂vue的transition，这部分内容你根本就不⽤看，直接上⼿
<transition>
<router-view></router-view>
</transition>
13. 数据获取
在切换到其他路由，其他路由获取数据有两种⽅式，渲染完成之后获取数据，渲染之前获取数据
1.渲染完成之后获取数据
正常⼈都是这么⼲的，就是在组件的created钩⼦中写api获取数据，不做介绍了
2.渲染之前获取数据
这个还是很经典的，很有实际价值
在接下来要切换的组件中的beforeRouteEnter中获取数据，数据获取完成之后再渲染，再添加⼀个渲染动画，感觉棒棒哒在next(vm => {
// 将获取的数据放到实例上，上⾯介绍过了
})
上⾯这个也可以通过监听$route来实现，不过有点稍微延迟，不推荐使⽤
watch: {
$route(){
...
}
}
14. 滚动⾏为
这个还是有点⽤的，切换到⼀个新的路由组件时，控制页⾯的位置
借助scrollBehavior⽅法，这个⽅法要写在router实例中
const router = new VueRouter({
routes: [...],
scrollBehavior (to,from,savedPosition) {
savedPosition是点击浏览器的前进后退按钮才管⽤，下⾯列举了⼏种使⽤demo
return {x: 0,y: 0}; 简单的回到最顶部
return savedPosition; 返回原先的位置
if (to.hash) {
return {selector: to.hash} 锚点定位
}
}
})
15. 懒加载
将组件拆分，实现按需加载，有如下⼏种⽅式，以后添加组件的话都这样⽤
1.把路由对应的组件拆分成异步组件
const Foo = resolve => {
resolve(require('./Foo.vue'))
})
}
2.AMD
const Foo = resolve => require(['./Foo.vue'], resolve)
3.将多个组件打包到⼀个模块中
const Foo = r => sure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => sure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => sure([], () => r(require('./Baz.vue')), 'group-foo')

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。