这是本菜鸟学习路由后整理的笔记,如果有什么问题,请见谅,也希望大佬们能指出其中的问题,好让本菜鸟能及时发现错误
为什么使用Vue路由
目前前端流行一种叫SPA单页面应用框架,单页面应用指的是应用只有一个主页面,通过动态替换DOM内容并同步修改url地址,来模拟多页应用的效果,切换页面的功能直接由前台脚本来完成,而不是由后端渲染完毕后前端只负责显示。而Vue路由就是能够以模拟多页面应用的效果。
官方文档:https://router.vuejs.org/zh/
路由基本使用顺序
1、引入包
2、创建实例化VueRouter对象
3、编写路由规则
4、挂载new Vue ()实例化对象中
路由基本使用
一、基本路由(名字我瞎掰的,意思就是最基本的使用方法)
1、引包(废话!)
2、创建实例化VueRouter对象
var router = new VueRouter({})
3、编写路由规则
path:就是www.xxxx.com/xxx最后这个xxx路径
component:顾明示意,就是对应的模块
var router = new VueRouter({
routes:[
{
// 路由匹配规则
path:'/login',
component: Login
},
{
path:'/register',
component: Register
}
]
})
4、通过 router 配置参数注入路由
new Vue({
el: '#app',
components: {
App
},
// 给vue实例化对象去管理
// router = router,可以简写为下面
router,
template: `
`
})
5、使用路由
router-lin:这是路由模块给出的一个模块,渲染是会渲染成a标签
to:相当于a标签的href属性
router-view:这是对应模块的入口,就是路由规则中path对应的模块会加载在里面
登录界面
二、命名路由
官方介绍:有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在routes
配置中给某个路由设置名称。
1、给路由设置名称
var router = new VueRouter({
routes:[
{
// 路由匹配规则
path:'/login/:id',
name:'login', 路由名称
component: Login
},
{
// query
path:'/register',
name:'register', 路由名称
component: Register
}
]
})
2、链接到一个命名路由
登录界面
三、动态路由匹配
继续来个官方介绍:我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个User
组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在vue-router
的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果。
意思就是比如淘宝的个人用户页面是一样,但是页面里面的数据却是不一样的,而我们通常是通过路径后面加上匹配规则去向后端查询数据。比如www.xxxxx.com/user/用户id,其中用户id就是查询条件。
1、设置动态路由
var router = new VueRouter({
routes:[
{
// 路由匹配规则
// 动态路由,以冒号开头
// path:'/login/:匹配的key',
path:'/login/:id',
name:'login',
component: Login
},
]
})
2、链接到一个命名路由
登录界面
参数使用
一个“路径参数”使用冒号:
标记。当匹配到一个路由时,参数值会被设置到this.$route.params
,可以在每个组件内使用。
this.$route.params.id
其他具体请参考官方文档
当然除了这种以外,我们经常会看到另一种形式,比如www.xxxxx.com/user?id=xxx
而这种形式叫做Query,使用方法也很简单,基本和动态路由一样
var router = new VueRouter({
routes:[
{
// query
path:'/register',
name:'register',
component: Register
}
]
})
注册界面
四、嵌套路由
实际生活中的应用界面,通常由多层嵌套的组件组合而成。就像segmentfault的问答页面一样
1、设置嵌套路由
其中,children属性里的模块就是嵌套在login模块里,children属性里的规则写法基本和普通写法一样。
注意,以/
开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
var router = new VueRouter({
routes:[
{
// 路由匹配规则
path:'/login',
name:'login',
component: Login,
children:[
{
path:'songe',
name:'songe',
component: Songe
},
{
path:'movie',
component: Movie
},
]
},
]
})
2、使用
var Login = {
template:`
我是登录页面
Songe
Movie
`
}
结语
在未接触Vue等框架前,我发现写单页面真的是一件炒鸡麻烦的事情,虽然仅仅依靠JQ也能实现功能,但是用起来会非常复杂。而Vue的路由组件虽然对于菜鸟来说一开始看起来很复杂,但是接触之后会发现对于JQ来说简单不少,如果当时我的毕业项目能用Vue来做的话真的能省一半的时间。。所以如果你还在大学中学前端的话,真的强烈建议同学们一定要学一个框架。
最后,同学们一定一定要多去看官方文档,里面的东西说得很清楚,所有使用方法和细节都交代清楚了,只要你会中文就能看得明白。