vueRouter（下）

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 },
];

问题：正常情况下404找不到会有状态码，是404，请问，为什么我们现在看到的状态码是200？

答：目前是在做前端开发，不是后端开发，无法指定返回的状态码，等到vue项目上线后可以与后端服务器结合实现状态码的指定。

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 },

8、路由元信息

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

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