VUE —— 8、路由、面包屑

小咪咪 2022-08-31 04:59 224阅读 0赞

**目录**

（11）路由

1.定义

2.用法

3.设置路由导航的两种方法

（1）声明式：点击标签时作用（有N种用法）

案例：传参

案例：接收（三种方式）

（1）params

（2）query

（3）普通方式

（2）编程式：点击标签，进入方法里面作用

4.路由传参

（1）方式一（params方式）

（2）方式二（query方式）

（3）两种方式的区别：

5.常见路由对象

6.router和route的区别（上面有实例）

7.路由中使用props

面包屑案例（针对多个层级）

监听路由变化

#  （11）路由 #

# 1.定义 #

Vue路由是指根据url分配到对应的处理程序；作用就是解析URL，调用对应的控制器（的方法，并传递参数）。Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接，从而允许某些路径渲染与之关联的任何一个视图；

**路由：**是指把数据从一个地方传送到另一个地方的行为和动作

# 2.用法 #

**页面定义：**

<div>
        
        
        
        <router-link to="/home">home</router-link>
        <router-link to="/news">news</router-link>
    </div>
    
    
    <router-view/>

**1****、定义（路由）组件**

var Home = {
            template: '#home'
        }
        var News = {
            template: '#news'
        }
        // 对应的模块内容：
        <template id = "home">
            <div>
                <h3>组件home</h3>
            </div>
        </template>
        <template id="news">
            <div>
                <h3>组件news</h3>
            </div>
        </template>

**2****、定义路由**

const routes = [ 
            {path: '/home', component: Home},
            {path: '/news', component: News},
            {path: '/', redirect: '/home'}		//redirect是默认自动跳转到指定位置
        ];

**路由命名**

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

routes: [ 
            {path: '/user/:id', name: 'user', component: User}
        ]

**3****、创建实例**

const aa = new VueRouter({ 
            routes,	//(缩写) 相当于routes: routes 
            linkActiveClass: 'active'
        });

**4****、创建和挂载根实例**

//记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
        window.onload = function () {
            new Vue({
                el: '#my',
                router
            });
        }

# 3.设置路由导航的两种方法 #

**声明式（点击标签时作用）**

<router-link :to="/home">

**编程式（点击标签，进入方法里面作用）**

router.push('/home')

## （1）声明式：点击标签时作用（有N种用法） ##

<router-link to="/home">home</router-link>
    <router-link to="/home/10">home</router-link>	
     //点击时，下面蓝绿色背景也是
    //对象 
    <router-link :to="{path:'/home'}">home</router-link>
    //路由通过名称
    <router-link :to="{name: 'homename'}">home</router-link>
    //直接路由带查询参数query，地址栏变成 /home?id=10 
    <router-link :to="{path: '/home', query: {id: 10}}">home</router-link>
    //命名路由带查询参数query，地址栏变成/home?id=10 
    <router-link :to="{name: 'homename', query: {id: 10}}">home</router-link>
    //直接路由带路由参数params，params不生效
    //如果提供了path，params会被忽略，也就是params等于没写，一般用name（下面第二个） 
    <router-link :to="{path: '/home', params: {id: 10}}">home</router-link>
    //命名路由带路由参数params，地址栏是/home/10 
    <router-link :to="{name: 'homename', params: {id: 10}}">home</router-link>

### 案例：传参 ###

**Nav****.vue**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70][] //在原来的项目上加入：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2][]//正常

**Nav****.vue**

![20210723063157496.png][]

![20210723063159528.png][]** //添加**

**part1****.vue**

<template>
      <h1>part1</h1>
    </template>
    
    <script>
    export default {
      name: 'Home',
    }
    </script>
    
    <style scoped>
    </style>

**index.js**![20210723063217902.png][]

{
        path: '/part1,
        name: 'part1',
        component: () => import('../views/part/part1.vue')
      },

**Nav****.vue**

<li class="p_item">
    ------------------------------- tab换成part1 --------------------------------------
            <router-link to="/part1" class="p_title">
    -----------------------------------------------------------------------------------
              <i class="iconfont"></i>模块一
            </router-link>
          </li>
    
          <li class="p_item">
            <router-link to="/banner" class="p_title">
              <i class="iconfont"></i>模块二
            </router-link>
          </li>

![2021072306324168.png][]

**Nav****.vue**

![20210723063259508.png][]

**index.js**![2021072306330297.png][]

{
    ----------------------------------- 添加 :id ---------------------------------------
    path: '/part1/:id,
    -----------------------------------------------------------------------------------
        name: 'part1',
        component: () => import('../views/part/part1.vue')
      },

![20210723063316369.png][]//解决

**Nav****.vue**

![20210723063338258.png][]

![20210723063340584.png][] //也可以用变量方式

### 案例：接收（三种方式） ###

### （1）params ###

**part1****.vue**

<template>
    ------------------------------------ 添加 ------------------------------------------
      <h1>part1 ----获取参数：{
       {$route.params.id}}</h1>
    -----------------------------------------------------------------------------------
    </template>
    
    <script>
    export default {
      name: 'Home',
    }
    </script>
    
    <style scoped>
    </style>

![20210723063423736.png][]

###  （2）query ###

**part2****.vue**

<template>
      <h1>part2 ----获取参数：{
       {$route.query.id}}</h1>
    </template>
    
    <script>
    export default {
      name: 'Home',
    }
    </script>
    
    <style scoped>
    </style>

**index.js**![20210723063445185.png][]

{
        path: '/part2',
        name: 'part2',
        component: () => import('../views/part/part2.vue')
      },

**Nav****.vue**

![20210723063513112.png][]

###  （3）普通方式 ###

**Nav****.vue**

<li class="p_item">
            <router-link :to="'/part1/' + n" class="p_title">
              <i class="iconfont"></i>模块一
            </router-link>
          </li>
    
          <li class="p_item">
            <router-link :to="{path: '/part2', query:{id: 10}}" class="p_title">
              <i class="iconfont"></i>模块二
            </router-link>
          </li>
    ------------------------------------ 添加 ------------------------------------------
          <li class="p_item">
            <a class="p_title" @click="skip()"> 
              <i class="iconfont"></i>模块三
            </a>
          </li>
    -----------------------------------------------------------------------------------
    ·
    ·
    ·
       methods: {
    ------------------------------------ 添加 ------------------------------------------
         skip() {
           this.$router.push('/part2');
         },
    -----------------------------------------------------------------------------------
       }
    }

![20210723063536559.png][]

//跳到part2，也就是回到模块二（但是模块二的参数是拿不到的）

**Nav****.vue**

<li class="p_item">
            <router-link :to="'/part1/' + n" class="p_title">
              <i class="iconfont"></i>模块一
            </router-link>
          </li>
    
          <li class="p_item">
            <router-link :to="{path: '/part2', query:{id: 10}}" class="p_title">
              <i class="iconfont"></i>模块二
            </router-link>
          </li>
    
          <li class="p_item">
            <a class="p_title" @click="skip()"> 
              <i class="iconfont"></i>模块三
            </a>
          </li>
    ·
    ·
    ·
      methods: {
        skip() {
          //this.$router.push('/part2');
          //直接路由带查询参数query，地址栏变成 /home?id=10
    ------------------------------------ 添加 ------------------------------------------
          this.$router.push({ path: "/part2", query: {id: this.n} });
    -----------------------------------------------------------------------------------
    },
      },

![20210723063554561.png][]

##  （2）编程式：点击标签，进入方法里面作用 ##

// 字符串
        router.push('/home')
    // 对象
        router.push({ path: '/home' })
    // 路由通过名称
        router.push({ name: 'homename' })
    // 直接路由带查询参数query，地址栏变成 /home?id=10
        router.push({ path: 'home', query: { id: 10 } })
    // 命名路由带查询参数query，地址栏变成/home?id=10
        router.push({ name: 'homename', query: { id: 10 } })
    // 直接路由带路由参数params，params不生效 
    //如果提供了path，params会被忽略，也就是params等于没写，一般用name（下面第二个） 
        router.push({ path: 'homename', params: { id: 10 } })
    // 命名路由带路由参数params，地址栏是/home/10
        router.push({ name: 'homename', params: { id: 10 } })

# 4.路由传参 #

## （1）方式一（params方式） ##

**1****、http://localhost:8080/user/10**

**传入****参数的方式：**

<router-link :to="'/user/'+id">
    user
    </router-link>

**路由配置：**

const routes = [ 
            {path: '/home', component: Home},
            {path: '/news', component: News},
            {path: '/user/:id', component: User},
            //路由中定义http://localhost:8080/#/user/10 需要定义ID
        ];

**获取****参数的方式：**

<div>
    User {
       {$route.params.id}}
    </div>

![20210723063758283.png][]

![20210723063806361.png][]![20210723063803686.png][]

##  （2）方式二（query方式） ##

**2****、http://localhost:8080/home?id=10**

**传入****参数的方式**

>     <router-link :to="{path:'/home',query: {id: 100}}">
>     test
>     </router-link>
> 
> ![20210723063855993.png][]//100
> 
> ![20210723063906789.png][]![20210723063908199.png][]
> 
>     ---------------------------- 第二种情况 没写：冒号 -----------------------------------
>     <router-link to="/name ? id:=10 & name='abc'">
>     test
>     </router-link>
> 
>  ![20210723063922118.png][] //可写多种
> 
>  //想获取什么直接写
> 
> ![20210723063934642.png][]![20210723063936753.png][]

**路由中定义：**

user?id=10 不需要在路由配置中定义参数          //上面的方式一需要配置

**获取****参数的方式：**

<div>
    test 
    {
       {$route.query.id}}
    </div>

## （3）两种方式的区别： ##

**1、方式二中**![20210723064018449.png][]

**2、方式二中** ![20210723064023651.png][]

#  5.常见路由对象 #

在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新，路由对象暴露了以下属性

> 1.$route.path
> 
> **字符串**，等于当前路由对象的路径，会被解析为绝对路径，如 "/home/news"。
> 
> 2.$route.params**（上面有实例）**
> 
> **对象**，包含路由中的动态片段和全匹配片段的键值对。
> 
> 3.$route.query**（上面有实例）**
> 
> **对象**，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到
> 
> $route.query.favorite == ‘yes‘。
> 
> 4.$route.router
> 
> **路由规则所属的路由器**（以及其所属的组件）。
> 
> 5.$route.matched（**下面有实例）** 
> 
> **数组**，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
> 
> 6.$route.name
> 
> **当前路径的名字**，如果没有使用具名路径，则名字为空。
> 
> 7.$route.meta**（上面有实例）**
> 
> **路由的所有信息**（路由元信息）
> 
> 8.$route.fullPath
> 
> 完成解析后的 URL，包含查询参数和hash的完整路径。

# 6.router和route的区别（上面有实例） #

> router是**全局路由的实例**,是VueRouter的实例，包括了路由的跳转方法，钩子函数等。
> 
> 比如：$router.push
> 
> 导航钩子：
> 
> $router.beforeEach((to,from, next)=>\{\})

> $route对象是**当前的路由信息**，包含当前URL解析得到的信息、包含当前的路径、参数，query对象等。
> 
> 比如：$route.params

# 7.路由中使用props #

有时需要在路由中定义一些值来供对应的组件使用，**props除了父子传参外，路由可以用来传递参数**

**index****.js**

![20210723064219833.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3][]

{
        path: '/part1/:id',
    name: 'part1',
    -------------------------------------- 添加 ----------------------------------------
        props: {   //可以自定义路由参数
          obj: {
            a: 'a',
            b: 'b'
          }
    },
    -------------------------------------------------------------------------------
        component: () => import('../views/part/part1.vue')
      },

**part1****.vue**

![20210723064241987.png][] //之前项目

<template>
    --------------------------------- 添加 {
       {title}} -----------------------------------
      <h1>part1 ----获取参数：{
       {$route.params.id}}------{
       {title}}</h1>
    -------------------------------------------------------------------------------
    </template>
    
    <script>
    export default {
      name: 'Home',
      data() {
    return {
    -------------------------------------- 添加 ----------------------------------------
          title: "",
    -------------------------------------------------------------------------------
        };
      },
    -------------------------------------- 添加 ----------------------------------------
        props: ['obj'], //获取到路由中的props
        mounted(){	//挂载后
            this.title = this.obj.a
        },
    -------------------------------------------------------------------------------
    }
    </script>
    
    <style scoped>
    </style>

![20210723064302554.png][]/缺点，地址暴露

**index****.js**

![20210723064313255.png][]

{
        path: '/part1/:id',
        name: 'part1',
        props: {   //可以自定义路由参数
          obj: {
    ---------------------------------- 换成aabbcc -------------------------------------
            a: 'aabbcc',
    -------------------------------------------------------------------------------
            b: 'b'
          }
        },
        component: () => import('../views/part/part1.vue')
      },

![20210723064331726.png][]//缺点，地址暴露

##  面包屑案例（针对多个层级） ##

**App****.vue**

<template>
      <div id="app">
        <Nav />
    <div>
    -------------------------------------- 添加 ----------------------------------------
          <Breadcumb />
    --------------------------------------------------------------------------------------------
          
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive" />
        </div>
      </div>
    </template>
    ·
    ·
    ·
    <script>
    -------------------------------------- 添加 ----------------------------------------
    import Nav from "./views/Nav"; 
    import Breadcumb from "./views/breadcumb"; 
    --------------------------------------------------------------------------------------------
    
    export default {
      name: "Home",
      data() {
        return {
        };
      },
      components: {
    -------------------------------------- 添加 ----------------------------------------
        Nav,
    Breadcumb,
    --------------------------------------------------------------------------------------------
      },
    };
    </script>
    
    <style>
    @import "./assets/css/index.css";
    #app {
      height: 100%;
    }
    -------------------------------------- 添加 ----------------------------------------
    .breadcumb ul li {
      display: inline-block;
    }
    .breadcumb ul li span {
      padding: 0 10px;
    }
    --------------------------------------------------------------------------------------------
    </style>

**breadcumb****.vue****（面包屑）**

![20210723064429888.png][]

<template>
     
    </template>
    
    <script>
    export default {
      name: "Home",
      data() {
        return {
        };
      },
      mounted() {	//挂载后
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210723064436341.png][]

![20210723064437980.png][]//写样式后

**index****.js**

![20210723064454982.png][]

const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/part1/:id',
        name: 'part1',
        props: {   //可以自定义路由参数
          obj: {
            a: 'aabbcc',
            b: 'b'
          }
    },
    -------------------------------------- 添加 ----------------------------------------
    meta: { title: '模块一' },
    -------------------------------------------------------------------------------
        component: () => import('../views/part/part1.vue')
      },
      {
        path: '/part2',
    name: 'part2',
    -------------------------------------- 添加 ----------------------------------------
    meta: { title: '模块二' },
    -------------------------------------------------------------------------------
        component: () => import('../views/part/part2.vue')
      },
      {
        path: '/tab',
        name: 'tab',
        meta: {
          keepAlive: true,  //需要缓存
    -------------------------------------- 添加 ----------------------------------------
          title: 'Tab切换'
    -------------------------------------------------------------------------------
        },
        component: () => import('../views/Tab.vue')
      },
      {
        path: '/list',
    name: 'list',
    -------------------------------------- 添加 ----------------------------------------
    meta: { title: '列表展示' },
    -------------------------------------------------------------------------------
        component: () => import('../views/list/index.vue'),
        children: [{      //二级路由
          //path:'testA',    
          path: '/list/testA',
          name: 'testA',
    -------------------------------------- 添加 ----------------------------------------
          meta: {title: '子列表A'},
    -------------------------------------------------------------------------------
          component: () => import('../views/list/part1.vue')
        },
        {
          path: 'testB',
          name: 'testB',
    -------------------------------------- 添加 ----------------------------------------
          meta: {title: '子列表B'},
    -------------------------------------------------------------------------------
          component: () => import('../views/list/part2.vue')
        }]
      },
    ]

![20210723064515199.png][]//每个路由都有

**breadcumb****.vue****（面包屑）**

<template>
      <div class="breadcumb">
    <ul>
    -------------------------------------- 换成 ----------------------------------------
          //这里的v是： 整个值
          <li v-for="(v, i) in lists" :key="i">
            <a>{
       { v.meta.title }}</a>
            <span>/</span>
          </li>
    -------------------------------------------------------------------------------
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: "Home",
      data() {
    return {
    -------------------------------------- 添加 ----------------------------------------
          lists: [],
    -------------------------------------------------------------------------------
        };
      },
      mounted() {	//挂载后
    -------------------------------------- 添加 ----------------------------------------
         
        console.log(this.$route.matched); 
    this.lists = this.$route.matched;	//拿到的是this.$route.matched（整个值）
    -------------------------------------------------------------------------------
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210723064544499.png][]//拿到的是this.$route.matched（整个值）

**上面是，想点击每个路由时，展示当前路由title值（但是未成功）**![20210723064558254.png][]

### 监听路由变化 ###

**breadcumb****.vue****（面包屑）**

<template>
      <div class="breadcumb">
    <ul>
          //这里的v是： 整个值
          <li v-for="(v, i) in lists" :key="i">
            <a>{
       { v.meta.title }}</a>
            <span>/</span>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: "Home",
      data() {
    return {
          lists: [],
        };
      },
      mounted() {	//挂载后
    -------------------------------------- 关掉 ----------------------------------------
         
        // console.log(this.$route.matched); 
        // this.lists = this.$route.matched;	//拿到的是this.$route.matched（整个值）
    -------------------------------------------------------------------------------
      },
    -------------------------------------- 添加 ----------------------------------------
      //监听路由变化
      watch: {
        $route(to, from) {
          console.log(to) 
          //点击模块一  
          //点击Tab切换  
        },
      },
    -------------------------------------------------------------------------------
    };
    </script>
    
    <style scoped>
    </style>

//点击模块一 ![20210723064641952.png][]

//点击Tab切换![20210723064641954.png][]

**breadcumb****.vue****（面包屑）**

<template>
      <div class="breadcumb">
    <ul>
          //这里的v是： 整个值
          <li v-for="(v, i) in lists" :key="i">
            <a>{
       { v.meta.title }}</a>
            <span>/</span>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: "Home",
      data() {
    return {
          lists: [],
        };
      },
      mounted() {	//挂载后
    -------------------------------------- 关掉 ----------------------------------------
         
        // console.log(this.$route.matched); 
    // this.lists = this.$route.matched;
    -------------------------------------------------------------------------------
      },
    -------------------------------------- 添加 ----------------------------------------
      //监听路由变化
      watch: {
        $route(to, from) {
          //console.log(to) 
          this.lists = to.matched; 	//拿到的是this.$route.matched（整个值）
        },
      },
    -------------------------------------------------------------------------------
    };
    </script>
    
    <style scoped>
    </style>

![2021072306472021.png][]![20210723064721421.png][]

![20210723064723657.png][]![20210723064725135.png][]

**breadcumb****.vue****（面包屑）**

<template>
      <div class="breadcumb">
    <ul>
          //这里的v是： 整个值
          <li v-for="(v, i) in lists" :key="i">
            <a>{
       { v.meta.title }}</a>
    -------------------------------------- 添加 ----------------------------------------
            <span v-if="i < lists.length-1">/</span>	//是否大于i
    -------------------------------------------------------------------------------
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    import Nav from "./views/Nav"; 
    import Breadcumb from "./views/breadcumb"; 
    
    export default {
      name: "Home",
      data() {
    return {
          lists: [],
        };
      },
      mounted() {	//挂载后
         
        // console.log(this.$route.matched)
    // this.lists = this.$route.matched
      },
      //监听路由变化
      watch: {
        $route(to, from) {
          //console.log(to) 
          this.lists = to.matched; 	//拿到的是this.$route.matched（整个值）
        },
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210723064751968.png][]![20210723064753630.png][]

//主要是去掉最后的**/**号

**breadcumb****.vue****（面包屑）**

<template>
      <div class="breadcumb">
    <ul>
          //这里的v是： 整个值
          <li v-for="(v, i) in lists" :key="i">
    -------------------------------------- 换成 ----------------------------------------
            <router-link :to="{path: v.path}">{
       { v.meta.title }}</router-link>
    -------------------------------------------------------------------------------
            <span v-if="i <lists.length-1">/</span>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    import Nav from "./views/Nav"; 
    import Breadcumb from "./views/breadcumb"; 
    
    export default {
      name: "Home",
      data() {
    return {
          lists: [],
        };
      },
      mounted() {	//挂载后
         
        // console.log(this.$route.matched); 
    // this.lists = this.$route.matched;
      },
      //监听路由变化
      watch: {
        $route(to, from) {
          //console.log(to) 
          this.lists = to.matched; 	//拿到的是this.$route.matched（整个值）
        },
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210723064816745.png][]

![20210723064820354.png][]//跳到到列表展示

**Nav****.vue**

<template>
      <div class="tree">
    <ul>
    -------------------------------------- 添加 ----------------------------------------
          <li class="p_item">
            <router-link to="/home" class="p_title">
              <i class="iconfont"></i>首页
            </router-link>
          </li>
    -------------------------------------------------------------------------------

**index****.js**

![20210723064842184.png][]

const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
    -------------------------------------- 添加 ----------------------------------------
      {
        path: '/home',
    name: 'home',
    meta: { title: '首页' },
        component: Home
      },
    -------------------------------------------------------------------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4][]

**Nav****.vue**

**breadcumb****.vue****（面包屑）**

//监听路由变化
      watch: {
        $route(to, from) {
          //console.log(to)
          //this.lists = to.matched; 	
    -------------------------------------- 添加 ---------------------------------------- 
          let matched = to.matched; 	//拿到的是this.$route.matched（整个值）
          if (matched.length && matched[0].name !== "home") {	//不等于首页
            matched = [
              {path: "/home", name: "home", meta: {title: "首页"}},
              ...matched,		//扩展
            ];
          }
          this.lists = matched;
    -------------------------------------------------------------------------------
        },
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210723064928267.png][]//点击首页，自动跳转首页

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 5][]

=====================================================================

**路由中的定义方式**

const routes = [ 
            {path: '/home', component: Home},
            {path: '/news', component: News},
            {path: '/part1', name: 'part1',
                props: { //可以自定义路由参数
                    data: {
                        a: 'a',
                        b: 'b'
                    }
                },
                component: () => import('../views/part/part1.vue')
            },
        ];

**组件的获取方式：**

props: ['data'], //获取到路由中的props
        mounted(){	//挂载后
            this.title = this.data.a;
    },
    
        {
       {title}}	//'a'

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70]: /images/20220829/c3d388947d6841d98183cee49802be72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/20b890f84ac74fc8b3f7f3fbc4f115ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/cfee75300995460e870ede5f859f0f71.png
[20210723063157496.png]: /images/20220829/b285d82c746141da8478b8561aa30f03.png
[20210723063159528.png]: /images/20220829/1794120cf3b8424ab32f9f87ba792348.png
[20210723063217902.png]: /images/20220829/4243b246e06d4baebab147950cfd0d2e.png
[2021072306324168.png]: /images/20220829/1f00c7e6f1f940209eab2f1b908b5d54.png
[20210723063259508.png]: /images/20220829/2ad487a422004000a87b516bb291fe62.png
[2021072306330297.png]: /images/20220829/4d395f56839e47dbb36e2fe0790c5d49.png
[20210723063316369.png]: /images/20220829/40b1e3ddb17c4456a608afcdc6040432.png
[20210723063338258.png]: /images/20220829/4c938eb813c1455fbab27f3dad8a5e7a.png
[20210723063340584.png]: /images/20220829/9007649cec9d47319394a945595a7834.png
[20210723063423736.png]: /images/20220829/f79a34ef7854484ea8315a8f0b84acae.png
[20210723063445185.png]: /images/20220829/290f30d779d84ff9aeef57fbd059ac7d.png
[20210723063513112.png]: /images/20220829/b7cd4691d4af4e79b551aba8c82485a8.png
[20210723063536559.png]: /images/20220829/9d21b3db83604ec1856de6a4ba5a77b0.png
[20210723063554561.png]: /images/20220829/6a6298bf22004a5bbe7c46922e31dcd8.png
[20210723063758283.png]: /images/20220829/7cb965165629413c8cc220eb8281e727.png
[20210723063806361.png]: https://img-blog.csdnimg.cn/20210723063806361.png
[20210723063803686.png]: /images/20220829/f1fd25cd3baf45bfb1a656f8ba0cde93.png
[20210723063855993.png]: /images/20220829/f676b5f669104eac89e6d893019b15ab.png
[20210723063906789.png]: https://img-blog.csdnimg.cn/20210723063906789.png
[20210723063908199.png]: /images/20220829/bb0718a90f55440aaf0758eb0c3d8494.png
[20210723063922118.png]: /images/20220829/48cead6d41c448b8985f614f4bb7a085.png
[20210723063934642.png]: https://img-blog.csdnimg.cn/20210723063934642.png
[20210723063936753.png]: /images/20220829/824375388ffe43a7a70e2a8026b719a1.png
[20210723064018449.png]: /images/20220829/4beeff4dc4a742f089a6780e297db74e.png
[20210723064023651.png]: /images/20220829/0cb9562fe30e4ef98faa21b75885dad4.png
[20210723064219833.png]: /images/20220829/d708de6b419c41349dae9bc15111b20d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/e5bd433ccdda479fb751edfad0bc4b14.png
[20210723064241987.png]: /images/20220829/5253600a5e5f41eb803cd9c2b3c011c2.png
[20210723064302554.png]: /images/20220829/6f6776a3e6f141c1b19e4359ea61703c.png
[20210723064313255.png]: /images/20220829/d29b0732c04d4c01ac859521d55a5a37.png
[20210723064331726.png]: /images/20220829/4d0496c44d9849cf936dc8e887420fb2.png
[20210723064429888.png]: /images/20220829/6b9d588e8d8f4100b2efbb22fa680168.png
[20210723064436341.png]: /images/20220829/2be20ba9cb2f461e909e57d0f338c558.png
[20210723064437980.png]: /images/20220829/a605dc5b1aa14063a86bbe4b91548512.png
[20210723064454982.png]: /images/20220829/8e43c0ca5abf4ae19c518b2d0b55a489.png
[20210723064515199.png]: /images/20220829/dd338641ca26491ebb7535329245e1a6.png
[20210723064544499.png]: /images/20220829/bfeb5003311d46a580d27f762895d86a.png
[20210723064558254.png]: /images/20220829/f6c3b27e72614375b30a79755c803598.png
[20210723064641952.png]: /images/20220829/59029b622aff438ca00c59c73cb50100.png
[20210723064641954.png]: /images/20220829/139d9f0a0d2e41509de083927ef1f4f0.png
[2021072306472021.png]: https://img-blog.csdnimg.cn/2021072306472021.png
[20210723064721421.png]: /images/20220829/aa1b7be3f7ec43868ea5d47a32e0c62a.png
[20210723064723657.png]: https://img-blog.csdnimg.cn/20210723064723657.png
[20210723064725135.png]: /images/20220829/3d02260bfb2d4c7ca24173b1457e4483.png
[20210723064751968.png]: https://img-blog.csdnimg.cn/20210723064751968.png
[20210723064753630.png]: /images/20220829/73dc0ef5d1694b78bdb45547d204ee7f.png
[20210723064816745.png]: /images/20220829/e0ff3817ae754f489d62aebc21a525ac.png
[20210723064820354.png]: /images/20220829/593729f331144ce8b1320f5b57ca0a0d.png
[20210723064842184.png]: /images/20220829/689e57bb7f564275b0b45494c60d5c4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/4921548b2045428e8d85cb61a7f12c38.png
[20210723064928267.png]: /images/20220829/3fb19e70ca0747e399da40572feca9ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/77742b12200d48b68389c829477801a5.png