day03-07

404页面

就是当路径没有匹配页面的时候，需要给用户一个错误页面的提示

路由规则也是有优先级的  配置越靠前  优先级越高

// 404页面是一个错误提示页面  我们必须把路由规则配置放在最后
  {
    path: '*',
    name: 'Err',
    component: Err
  },

路由规则也是有优先级的 配置越靠前 优先级越高 

重定向---redirect

重新定位方向

在用户第一次进入的时候  我们需要把用户的路径重新定位到首页

在路由规则中形形重定向的设置

const routes = [

  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/shop',
    name: 'Shop',
    component: Shop
  },
  {
    path: '/user',
    name: 'User',
    component: User
  },

  // 重定向 /默认路径
  {path:"/",redirect:"/home"},


  // 404页面是一个错误提示页面  我们必须把路由规则配置放在最后
  {
    path: '*',
    name: 'Err',
    component: Err
  }
  ]

路由出口

router-view 来设置路由出口  就是个努路由的规则 显示规则所匹配的的理由组件页面 显示的位置

多级路由/嵌套路由

在应用开发的过程中通常会出现在一个页面中嵌套另外一个局部页面进行局部跳转的时候

1.新建二级路由页面

2.router下的index.js中先引用二级路由

3.配置二级路由规则

3.1要配置规则先要确定规则写在哪  二级路由的规则写在一级路由的规则内 使用children来标识

path可以是/二级路由 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
import Shop from '../views/shop.vue'
import User from '../views/user.vue'
import Err from '../views/err.vue'

// 二级路由
import Era from "@/views/er/era.vue"
import Erc from "@/views/er/erc.vue"
import Erd from "@/views/er/erd.vue"

Vue.use(VueRouter)

const routes = [

  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/shop',
    name: 'Shop',
    component: Shop
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    // 设置二级路由
    children:[
      {
        path: '/era',
        name: 'era',
        component:Era
      },
      {
        path: '/erc',
        name: 'erc',
        component:Erc
      },
      {
        path: '/erd',
        name: 'erd',
        component:Erd
      },
    ]
  },

  // 重定向 /默认路径
  {path:"/",redirect:"/home"},


  // 404页面是一个错误提示页面  我们必须把路由规则配置放在最后
  {
    path: '*',
    name: 'Err',
    component: Err
  }


  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

path也可以是不带/

{
    path: '/user',
    name: 'User',
    component: User,
    // 设置二级路由
    // path不带/
    children:[
      {
        path: 'era',  // path不带/
        name: 'era',
        component:Era
      },
      {
        path: 'erc',  // path不带/
        name: 'erc',
        component:Erc
      },
      {
        path: 'erd',  // path不带/
        name: 'erd',
        component:Erd
      },
    ]
  },

4.设置二级路由的路由出口你在对应的以及路由页面中进行设置使用router-view

<div>
      <router-view></router-view>
     user
  </div>

5.设置二级路由的导航

方式1 在设置二级路由规则的时候 path带/来设置的时候 二级路由的路径是 /二级路由

<div>
         <router-link to="/era">era</router-link>
         <router-link to="/erc">erc</router-link>
         <router-link to="/erd">erd</router-link>
     </div>

 方式二 在设置二级路由规则的时候path不带/来设置的时候

二级路由的路径是 /一级路由/二级路由

 		 <router-link to="/user/era">era</router-link>
         <router-link to="/user/erc">erc</router-link>
         <router-link to="/user/erd">erd</router-link>

路由传参/动态路由匹配

在vue中需要把数据从一个页面传递到另外一个页面的时候

方式

params方式

1.在需要接受数据的路由规则中设置接受参数

{
    path: '/shop/:xiaoming',//设置接收参数
    name: 'Shop',
    component: Shop
  },

2.发送

声明式

<router-link :to="{name:'你要去的路由的name',params:{设置的接收参数:'传递的数据'}}"></router-link>

<template>
  <div>
      home
      <!-- <router-link :to="{name:'你要去的路由的name',params:{设置的接收参数:'传递的数据'}}">点我把数据使用声明式方式传递到shop中</router-link> -->
      <router-link :to="{name:'Shop',params:{xiaoming:'呵呵我是传递的额数据'}}">点我把数据使用声明式方式传递到shop中</router-link>
  </div>
</template>

编程式 

 methods:{
        fun(){
            this.$router.push({name:'Shop',params:{xiaoming:'1111呵呵我是传递的额数据'}})
        }
    }

3.接受

直接使用this.$route.params.xxxx

<div>
   shop----{{this.$route.params.xiaoming}}
  </div>

query方式

1.发送

语法：

<!-- query传参可以使用name 或者 path -->
        <router-link :to="{name:'Shop',query:{xiaoming:'我是数据'}}">点我声明式传参query</router-link>
        <router-link :to="{path:'/shop',query:{xiaoming:'我是数据'}}">点我声明式传参query2222</router-link>

 2.接收

this.$route.query.xxxx

query和params的区别

语法上的区别：

query方式传参分为两步 发送数据的时候可以使用name回去爱可以使用path来进行  接受的时候使用this.$route.query.xxxx

params传参需要三步  并且在发送数据的时候只能是name接收的时候使用this.$route.params.xxxx

url展示上 params在url上只显示数据 相对来说传参安全一点 queryurl 有key还有val相对来说不安全 

$router与$route区别

$router对象：是vue路由的对象 他是路由实例 他是一个路由全局对象 包含了与路由相关的关键属性

$route对象：是跳转到指定路由的局部对象 一个路由页面就是一个$route对象