Vue学习笔记64--路由(VueRouter)(简介 + 基本使用 + 嵌套路由 + 路由query传参 + 路由命名 + 路由params传参 + 路由props配置 + router-link的redirect属性)

一：路由简介

1. 路由就是一组key-value的对应关系
2. 多个路由，需经过路由器进行管理

SPA应用：single page web application(单页面web应用)

Vue-router

一：相关理解

1. vue-router：vue的一个插件库(需安装--npm install vue-router --save)，专门用来实现SPA应用
2. 对SPA应用的理解
   • single page web application(单页面web应用)
   • 整个应用只有一个完整的页面
   • 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
   • 数据要通过ajax请求获取
3. 路由的理解(什么是路由？)
   • 一个路由就是一组映射关系(key-value)
   • key为路径，value可能是function或component
4. 路由分类
   • 后端路由
     • 理解：value是function，用于处理客户端提交的请求
     • 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
   • 前端路由
     • 理解：value是component，用于展示页面内容
     • 工作过程：当浏览器的路径改变时，对应的组件就会显示

 二：基本路由(学习资料：https://router.vuejs.org/zh/installation.html)

安装应用路由

第一步：安装vue-router

npm install vue-router@3 --save  对应 vue2

npm install vue-router@4 --对应vue3

第二步：应用插件并编写router配置项(src/router创建文件并新增index.js——用于定义路由)

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
 4 import About from '../views/About.vue'

//Vue中使用router插件
Vue.use(VueRouter)

//路由配置，配置路由路径与组件的对应关系
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {//根路由--默认
    path: '/',
    redirect: '/home'
  }
]

//新建路由实例
const router = new VueRouter({
  routes
})

//导出路由实例，在main.js中导入使用
export default router  

第三步：main.js文件——用于引入路由

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
//导入路由router
 6 import router from './router'

// 配置提示
Vue.config.productionTip = false

new Vue({
12   router,      //在vue实例中使用router
  render: h => h(App)
}).$mount('#app')

第四步：App.vue——在app中引入路由(router-link：实现组件切换；router-view：指定展示位置)

<template>
  <div>
    <nav>
      <router-link style="margin: 10px;"
                   to="/Home">Home</router-link>
      <router-link to="/About">About</router-link>
　　　　　　<!--指定展示位置-->
      <router-view></router-view>
    </nav>
  </div>
</template>

<script>
// 引入组件
// import Home from './components/Home.vue';
// import About from './components/About.vue';
export default {
  name: 'App',
  // components: { Home, About },


}
</script>

<style scoped>
</style>

示例一：路由组件 + 一般组件

 main.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
//导入路由router
import router from './router'

// 配置提示
Vue.config.productionTip = false

new Vue({
  router,      //在vue实例中注册使用router
  render: h => h(App)
}).$mount('#app')

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

//Vue中使用router插件
Vue.use(VueRouter)

//路由配置，配置路由路径与组件的对应关系
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {//根路由--默认
    path: '/',
    redirect: '/home'
  }
]

//新建路由实例
const router = new VueRouter({
  routes
})

//导出路由实例，在main.js中导入使用
export default router  

Banner.vue

<template>
  <h2>Vue Router Demo</h2>
</template>

<script>
export default {
  name: 'Banner',
}
</script>

<style>
</style>

About.vue

<template>
  <div>
    <h3>about page</h3>
  </div>
</template>

<script>
export default {
  name: 'About',

}
</script>

<style>
</style>

Home.vue

<template>
  <div>
    <h3>home page</h3>
  </div>
</template>

<script>
export default {
  name: 'Home',

}
</script>

<style>
</style>

App.vue

<template>
  <div>
    <div>
      <!-- 一般组件 需要引入+注册 -->
      <Banner />
    </div>
    <div>
      <!-- 路由组件 -->
      <router-link style="margin: 10px;"
                   to="/Home">Home</router-link>
      <router-link to="/About">About</router-link>
      <router-view>
        <!-- 用于填充路由组件 -->
      </router-view>
    </div>
  </div>

</template>

<script>
// 引入组件
import Banner from './components/Banner.vue';

export default {
  name: 'App',
  components: { Banner },


}
</script>

<style scoped>
</style>

总结==》

1. 路由组件通常存放在views(pages)文件夹中,一般组件通常存放在components文件夹中
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3. 每个组件都有自己的$router属性，里面存储着自己的路由信息--图上图所示
4. 整个应用只有一个router，可以通过组件的$router属性获取到

三：嵌套路由

 

 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '@/views/home/News.vue'
import Message from '@/views/home/Message.vue'

//Vue中使用router插件
Vue.use(VueRouter)

//路由配置，配置路由路径与组件的对应关系
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
18       {
19         path: '/home/news',//path最左侧/代表根路径
20         component: News
21       },
22       {
23         path: 'Message',//这里没有用/ 表示相对路径
24         component: Message,
25       },
26       {
27         path: '',
28         redirect: '/home/News'
29       }
30     ]
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },
  {//根路由--默认
    path: '/',
    redirect: '/home'
  }
]

//新建路由实例
const router = new VueRouter({
  routes
})

//导出路由实例，在main.js中导入使用
export default router  

Home.vue

<template>
  <div>
    <h3>home page</h3>
    <div>
      <ul class="nav nav-tabs">
 6         <li style="margin: 10px;"><router-link to="/home/News">News</router-link></li>
 7         <li style="margin: 10px;"><router-link to="/home/Message">Message</router-link></li>
 8       </ul>
 9 
10       <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',

}
</script>

<style>
</style>

总结：

三：路由传参(query)

示例如下：

 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '@/views/home/News.vue'
import Message from '@/views/home/Message.vue'
import Detail from '@/views/home/Detail.vue'

//Vue中使用router插件
Vue.use(VueRouter)

//路由配置，配置路由路径与组件的对应关系
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: '/home/news',//path最左侧/代表根路径
        component: News
      },
      {
        path: 'Message',//这里没有用/ 表示相对路径
        component: Message,
        children: [
27           {
28             path: '/home/detail',//path最左侧/代表根路径
29             component: Detail
30           },
31         ]
      },
      {
        path: '',
        redirect: '/home/News'
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },
  {//根路由--默认
    path: '/',
    redirect: '/home'
  }
]

//新建路由实例
const router = new VueRouter({
  routes
})

//导出路由实例，在main.js中导入使用
export default router  

Message.vue

<template>
  <div>
    <h3>Message page</h3>
    <ul>
      <li v-for="m in messageList"
          :key="m.id">
        <!-- 传参方式一：跳转路由并携带query参数， to的字符串写法 -->
        <!-- <router-link :to="`/home/detail/?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->

        <!-- 传参方式二：跳转路由并携带query参数， to的对象写法 -->
        <router-link :to="{
12             path: '/home/detail',
13             query: {
14               id:m.id,
15               title:m.title
16             }
17           }">
18           {{ m.title }}
19         </router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data () {
    return {
      messageList: [
        { id: '001', title: 'message 001' },
        { id: '002', title: 'message 002' },
        { id: '003', title: 'message 003' },
      ]
    }
  }

}
</script>

<style>
</style>

Detail.vue

<template>
  <ul>
    <li>消息编号：{{ $route.query.id }}</li>
    <li>消息标题：{{ $route.query.title }}</li>

  </ul>
</template>

<script>
export default {
  name: 'Detail',
  mounted () {
    console.log('$route==》', this.$route)
  },
}
</script>

<style>
</style>

四：路由命名(name)

 

 注：简化写法中，对象写法中，如果使用 path 代替 name 则需写完整路径。

五：路由传参(params)

 

 

示例如下所示：

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '@/views/home/News.vue'
import Message from '@/views/home/Message.vue'
import Detail from '@/views/home/Detail.vue'

//Vue中使用router插件
Vue.use(VueRouter)

//路由配置，配置路由路径与组件的对应关系
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: '/home/news',//path最左侧/代表根路径
        component: News
      },
      {
        path: 'Message',//这里没有用/ 表示相对路径
        component: Message,
        children: [
          {
            　　name: 'detail',
29             path: '/home/detail/:id/:title',//path最左侧/代表根路径
30             component: Detail
          },
        ]
      },
      {
        path: '',
        redirect: '/home/News'
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },
  {//根路由--默认
    path: '/',
    redirect: '/home'
  }
]

//新建路由实例
const router = new VueRouter({
  routes
})

//导出路由实例，在main.js中导入使用
export default router  

Message.vue

<template>
  <div>
    <h3>Message page</h3>
    <ul>
      <li v-for="m in messageList"
          :key="m.id">
        <!-- query传参方式一：跳转路由并携带query参数， to的字符串写法 -->
        <!-- <router-link :to="`/home/detail/?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->

        <!-- query传参方式二：跳转路由并携带query参数， to的对象写法 -->
        <!-- <router-link :to="{
            path: '/home/detail',
            query: {
              id:m.id,
              title:m.title
            }
          }">
          {{ m.title }}
        </router-link> -->

        <!-- params传参方式一：跳转路由并携带参数， to的字符串写法 -->
22         <!-- <router-link :to="`/home/detail/${m.id}/${m.title}`">{{ m.title }}</router-link> -->
23 
24         <!-- params传参方式二：跳转路由并携带query参数， to的对象写法 
25           注：params 对象写法必须使用name 替代path
26         -->
27         <router-link :to="{
28             // path: '/home/detail',
29             name:'detail',
30             params: {
31               id:m.id,
32               title:m.title
33             }
34           }">
35           {{ m.title }}
36         </router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Message',
  data () {
    return {
      messageList: [
        { id: '001', title: 'message 001' },
        { id: '002', title: 'message 002' },
        { id: '003', title: 'message 003' },
      ]
    }
  }

}
</script>

<style>
</style>

Detail

<template>
  <ul>
 3     <li>消息编号：{{ $route.params.id }}</li>
 4     <li>消息标题：{{ $route.params.title }}</li>

  </ul>
</template>

<script>
export default {
  name: 'Detail',
  mounted () {
    console.log('$route==》', this.$params)
  },
}
</script>

<style>
</style>

六：路由的props配置

 

总结：

配置路由的props有三种写法：(对象写法、bool值写法、函数写法)

1. 对象写法：不建议使用，传值固定
   • eg：props: {a:1,b:'你好'}  
   • 在组件中取值： props: ['a', 'b'],
2. bool值写法：bool值
   • props: true--若只为真，就会把该路由组件收到的说有params(不能接受到query参数)参数以props的形式传给对应组件
   • 值适用于获取param参数，不能用于query参数
3. 值为函数写法：可操作params参数，同时也可操作query参数
   • 不确定参数类型--建议用法

     •         props ($route) {
                     // return { id: $route.query.id, title: $route.query.title }
                     return { id: $route.params.id, title: $route.params.title }
                }    

   • 确定参数类型--以params为例
     • 结构赋值

       // props ({ query }) {  //结构赋值
                   props ({ params }) {
                     // return { id: $route.query.id, title: $route.query.title }
                     return { id: params.id, title: params.title }
                   }    

     • 连续结构赋值　

     •             // 结构赋值连续写法
                   props ({ params: { id, title } }) {
                     // return { id: $route.query.id, title: $route.query.title }
                     return { id, title }
                   }

示例如下所示：

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '@/views/home/News.vue'
import Message from '@/views/home/Message.vue'
import Detail from '@/views/home/Detail.vue'

//Vue中使用router插件
Vue.use(VueRouter)

//路由配置，配置路由路径与组件的对应关系
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: '/home/news',//path最左侧/代表根路径
        component: News
      },
      {
        path: 'Message',//这里没有用/ 表示相对路径
        component: Message,
        children: [
          {
            name: 'detail',
            path: '/home/detail/:id/:title',//path最左侧/代表根路径
            component: Detail,

            // props写法一：值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
            // props: {a:1,b:'你好'}  //不常用,传固定值

            // props写法二：值为bool，若值为真--就会把该路由组件收到的说有params(不能接受到query参数)参数以props的形式传给Detail组件
            // props: true

            // props写法三：值为函数
            props ($route) {
40               // return { id: $route.query.id, title: $route.query.title }
41               return { id: $route.params.id, title: $route.params.title }
42             }

            // props ({ query }) {  //结构赋值
            // props ({ params }) {
            //   // return { id: $route.query.id, title: $route.query.title }
            //   return { id: params.id, title: params.title }
            // }

            // 结构赋值连续写法
            // props ({ params: { id, title } }) {
            //   // return { id: $route.query.id, title: $route.query.title }
            //   return { id, title }
            // }

          },
        ]
      },
      {
        path: '',
        redirect: '/home/News'
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },
  {//根路由--默认
    path: '/',
    redirect: '/home'
  }
]

//新建路由实例
const router = new VueRouter({
  routes
})

//导出路由实例，在main.js中导入使用
export default router  

Detail.vue

<template>
  <ul>
    <li>消息编号：{{id}}</li>
    <li>消息标题：{{title}}</li>

  </ul>
</template>

<script>
export default {
  name: 'Detail',
  // props: ['a', 'b'],
13   props: ['id', 'title'],
  computed: {

  },
  mounted () {
    console.log('$route==》', this.$route)
  },
}
</script>

<style>
</style>

七：router-link的redirect属性

如下所示，注：当使用replace属性后，浏览器中的地址信息将不被记录——即，将导致操作后，无退回操作

      <!-- 路由组件  -->
      <router-link replace
                   style="margin: 10px;"
                   to="/Home">Home</router-link>
      <router-link :replace="true"
                   to="/About">About</router-link>

注：浏览器地址栏左侧←→将不会有变化