Vue-基础路由的使用

这是本菜鸟学习路由后整理的笔记,如果有什么问题,请见谅,也希望大佬们能指出其中的问题,好让本菜鸟能及时发现错误


为什么使用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来做的话真的能省一半的时间。。所以如果你还在大学中学前端的话,真的强烈建议同学们一定要学一个框架。

最后,同学们一定一定要多去看官方文档,里面的东西说得很清楚,所有使用方法和细节都交代清楚了,只要你会中文就能看得明白。

你可能感兴趣的:(vue.js,前端,javascript)