Vue Router

网址：Vue Router，vuerouter是vue全家桶（vue+vue router+vuex ）**之一。

此处建议创建一个带Router的vue项目。

1、介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由（套娃，父子路由）
模块化的、基于组件的路由配置
路由参数、查询、通配符
带有自动激活（默认选中效果）的 CSS class 的链接
HTML5 历史模式或 hash 模式

MVVM框架采用的路由都会在地址改变的时候页面不刷新，这种应用我们称之为SPA（Single Page Application）

2、路由模式切换

vue-router中默认使用的是hash模式的路由，也就是前面介绍的地址栏中URL带有“#”的形式，如果需要切换成history模式，则可以在创建路由实例时进行指定，指定的配置项为mode，可选值：

hash：默认，设置路由模式为hash路由
history：设置路由模式为history路由

3、导航方式

含义：从一个组件/地址去往另一个组件/地址的方式。

在页面中，导航实现有2种方式：

声明式导航：通过点击链接实现的导航方式，例如HTML中的“<a>”标签，Vue中的“<router-link>”所实现的。（其性质与a标签的性质类似）
编程式导航：通过调用JavaScript形式API实现的导航方式，例如location.href实现的跳转效果

3.1、声明式导航

它就是先在页面中定义好跳转的路由规则，vueRouter中通过router-link组件来完成

<!-- 纯字符串 -->
<router-link to="/home">Home</router-link>

<!-- 动态绑定路径 -->
<router-link :to="'/home'">Home</router-link>

<!-- 对象形式 -->
<router-link :to="{ path: '/home' }">Home</router-link>

<!-- 通过路由命名并且携带隐式参数 -->
<router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link>

<!-- 对象形式带查询字符串 -->
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
  Register
</router-link>

<!-- 
    to 要跳转到的路由规则  string|object
    to="users"
    :to="{path:'path'}"
    tag="tagName"       去指定声明式导航产生的链接所使用的标签，默认是a标签
-->

3.2、编程式导航

简单来说，编程式导航就是通过JavaScript来实现路由跳转

this.$router.push("/login");
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });
// 不要将path属性与params属性一起使用，这样会导致params路由参数获取不到
// name属性可以与params属性传参一起使用
this.$router.push({ name:'user' , params: {id:123} });
this.$router.go( n );//n为数字  负数为回退
this.$router.back(); // 返回上一页

注意点：编程式导航在跳转到与当前地址一致的URL时会报错，但这个报错不影响功能：

如果患有强迫症，可以在路由入口文件index.js中添加如下代码解决该问题：

// 该段代码不需要记，理解即可
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch((err) => err);
};

4、路由重定向

概念：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面
实现：通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向

代码示例

<script type="javascript">
var router = new VueRouter({
    // routes是路由规则数组 
    routes: [
        // 每个路由规则都是个配置对象，至少有path和component两个属性（重定向除外）
        // path表示当前路由规则匹配的hash地址 
        // component表示当前路由规则对应要展示的组件
        { path: '/', redirect: '/user' },
        { path: '/user', component: User },
        { path: '/register', component: Register }
    ]
})
</script>

component属性是可选属性，因此在写的时候需要注意，写错了也不会报错的。

5、嵌套路由

路由前缀： /admin/user/add /admin/user/del /admin/user/mod

相同部分可以提取出来，减少重复劳动。

————————————以上为nodejs中的概念————————————————

上述概念在vue中被称之为叫做嵌套路由。

套娃，可以按照之前的nodejs处的路由前缀去理解。（当有些路由有公共部分的前缀时，在vue中就可以使用嵌套路由）

嵌套路由最关键在于理解子级路由的概念：

比如我们有一个/users的路由，那么/users下面还可以添加子级路由，如:/users/index、/users/add等等，这样的路由情形称之为嵌套路由。

核心思想：在父路由组件的模板内容中添加子路由链接和子路由填充位（占坑），同时在路由规则处为父路由配置children属性指定子路由规则：

routes: [
  { 
      path: "/user", 
      component: User,  //这个不能丢
      // 通过children属性为/user添加子路由规则
      children:[
          // 子路由地址前不能写“/”，如果写了则表示从根开始
          { path: "index", component: Index },
          { path: "add", component: Add },
      ]
  }
]

<!-- 需要在 User组件中定义一个router-view 用于嵌套路由的渲染显示 -->
<router-view></router-view>

6、404路由

作用：用于处理当路由匹配不上的时候页面的展示（不做404路由，则页面限时白板页面）

由于Vue路由是从上到下执行的，只要在路由配置规则中最后面放个*号（通配符）路由就可以了，例如：

const routes = [
    { path: "/hello", redirect: Hello },
    { path: "/about", component: About },
    { path: "/news", component: News },
    // 404路由
    { path: "*", component: NotFound },
];

3.7、路由参数

本节知识点就是为了restful服务的，看如果在vue中使用restful形式进行参数传递。

如何传递
- 在声明路由的时候，将可变部分通过“:变量名”的形式进行替代
如何获取
- 获取this.$route来获取

// 传递参数id
var router = new VueRouter({
    // routes是路由规则数组 
    routes: [
        { path: '/user/:id', component: User },
        // 此处的“:”只是在声明的时候写，在使用的时候不需要写“:”
    ]
})

<template>
    <div>
        <!-- 单文件形式的组件, 可以在视图中直接接收路由参数，但是一般不这么用 -->
        这是news组件{{$route.params.id}}
    </div>
</template>

路由规则中的“:”只是在声明的时候写，在使用的时候不需要写“:”，例如如下代码：

问题：如上代码，如果路由规则里声明需要传递参数，但是实际使用的时候没传递参数会怎么样？

答：如果声明需要传递参数，但是实际不传的话则会影响落地页的显示，显示成白板（但是不报错）。但是如果有404路由在规则的最后，则匹配404路由。

注意：在实际开发的时候会有可能需要传参也可能不需要传参的情况，这个时候需要用到可选路由参数点。

定义可选路由参数的方式很简单，只需要在原有的路由参数声明位置后面加上个?即可。例如：

{ path: "showdetail/:id?", component: ShowDetail },

3.8、路由元信息

有时，我们可能希望将任意信息附加到路由上，例如在后续做登录判断的时候需要标记哪些地址必须登录后才能访问。这些事情可以通过接收属性对象的meta属性来实现，定义路由的时候我们可以这样配置 meta 字段：

const routes = [
    {
        path: "/posts",
        component: PostsLayout,
        children: [
            {
                path: "new",
                component: PostsNew,
                // 只有经过身份验证的用户才能创建帖子
                meta: { requiresAuth: true },
            },
            {
                path: ":id",
                component: PostsDetail,
                // 任何人都可以阅读文章
                meta: { requiresAuth: false },
            },
        ],
    },
]