Vue-基础路由的使用

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

---

为什么使用Vue路由

目前前端流行一种叫SPA单页面应用框架，单页面应用指的是应用只有一个主页面，通过动态替换DOM内容并同步修改url地址，来模拟多页应用的效果，切换页面的功能直接由前台脚本来完成，而不是由后端渲染完毕后前端只负责显示。而Vue路由就是能够以模拟多页面应用的效果。

官方文档：https://router.vuejs.org/zh/

路由基本使用顺序

1、引入包
2、创建实例化VueRouter对象
3、编写路由规则
4、挂载new Vue ()实例化对象中

路由基本使用

一、基本路由（名字我瞎掰的，意思就是最基本的使用方法）

1、引包（废话！）

<script src="./node_modules/vue-router/dist/vue-router.js"></script>

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: `
                <App/>
             `
        })

5、使用路由

router-lin：这是路由模块给出的一个模块，渲染是会渲染成a标签
to：相当于a标签的href属性
router-view：这是对应模块的入口，就是路由规则中path对应的模块会加载在里面

<router-link to="/login">登录界面</router-link>
<router-view></router-view>

二、命名路由

官方介绍：有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在routes配置中给某个路由设置名称。

1、给路由设置名称

var router = new VueRouter({
            routes:[
                {
                    // 路由匹配规则
                    path:'/login/:id',
                    name:'login',   路由名称
                    component: Login
                },
                {
                    // query
                    path:'/register',
                    name:'register',   路由名称
                    component: Register
                }
            ]
        })

2、链接到一个命名路由

<router-link :to="{name:'login'}">登录界面</router-link>

三、动态路由匹配

继续来个官方介绍：我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个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、链接到一个命名路由

<router-link :to="{name:'login',params:{匹配的key:匹配的内容}}">登录界面</router-link>

参数使用

一个“路径参数”使用冒号:标记。当匹配到一个路由时，参数值会被设置到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
                }
            ]
        })

<router-link :to="{name:'register',query:{id:xxx}}">注册界面</router-link>

四、嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。就像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:`
                <div>我是登录页面
                    <br/>
                    <router-link :to="{name:'songe'}">Songe</router-link>
                    <router-link to='/login/movie'>Movie</router-link>
                    <router-view></router-view>
                </div>
                
            `
        }

结语

在未接触Vue等框架前，我发现写单页面真的是一件炒鸡麻烦的事情，虽然仅仅依靠JQ也能实现功能，但是用起来会非常复杂。而Vue的路由组件虽然对于菜鸟来说一开始看起来很复杂，但是接触之后会发现对于JQ来说简单不少，如果当时我的毕业项目能用Vue来做的话真的能省一半的时间。。所以如果你还在大学中学前端的话，真的强烈建议同学们一定要学一个框架。

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