vue-router基本使用方法

vue-router的基本使用方法

1. 在脚手架中使用vue-router首先要下载vue-router：vue2使用vue-router@3，vue3使用vue-router@4

/* 安装vue-router npm i vue-router@3 */

2. 在src文件夹创建router文件夹，并在这个文件夹下创建index.js文件，在js文件中写如下代码

// 该文件用来创建整个应用路由器
import VueRouter from 'vue-router';
// 引入组件
import About from '../components/About.vue';
import Home from '../components/Home.vue';

//创建一个路由器
export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
    },
    {
      path: '/home',
      component: Home,
    },
  ],
});

3. 然后就是在main.js中引入vueRouter，应用插件，引入创建好的路由器，最后挂载到vm上

//引入VueRouter
import VueRouter from 'vue-router';
// 引入路由器
import router from './router/index.js';
// 应用插件
Vue.use(VueRouter);
//创建vm
new Vue({
  el: '#app',
  render: (h) => h(App),
  router: router,
});

4 . 在需要路由跳转的文字上用router-link进行包裹，在需要显示跳转后的页面用router-view显示，特别注意，router-link具有active-class属性，可以实现点击那个地方跳转给这个地方添加激活状态的class，并且在vue-cli中可以将bootstrap.css放到public文件夹下，在public中的index.html进行引用。

          <router-link class="list-group-item" active-class="active" to="/about"
            >About</router-link
          >
          <router-link class="list-group-item" active-class="active" to="/home"
            >Home</router-link
          >
           <router-view></router-view>

 <!-- 
      引入第三方样式
     -->
    <link rel="stylesheet" href="./css/bootstrap.css" />

文件结构如下图所示

嵌套路由

嵌套路由需在路由文件夹中index.js在已经定义好的路由中加children[]属性，children属性中以对象形式定义孩子理由，与上层路由写法一直，path直接下下层路由路径即可。

children: [
        {
          path: 'messages',
          component: Messages,
        }
        ]  

在页面跳转子路由时，需在to属性写好完整路由路径，即父路由与子路由都要写完整。

 <router-link
            class="list-group-item"
            active-class="active"
            to="/home/messages"
            >Message</router-link
          >

命名路由

命名路由即给路由加一个名字，因在要写子路由与父路由的to='路由地址’过长，可在路由文件中给子路由增加一个name属性，在to中直接写name即可。

children: [{
  name: 'gyj',
   path: 'detail',
   component: Detail,
}]

在route-link中to需使用对象参数进行路由跳转

<router-link
          :to="{
            // path: '/home/messages/detail',
            name: 'gyj',
          }"
          >{{ item.title }}</router-link
        >

路由传参

路由传参有两种方式，一种为query，一种为params。

query传参

query传参有两种方式进行传参
to的字符串写法

   <!-- 跳转路由携带query参数,to的字符串写法 -->
         <router-link
          :to="`/home/messages/detail?id=${item.id}&title=${item.title}`"
          >{{ item.title }}</router-link
        > 

被传参路由的组件接收参数代码如下

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

to的对象写法

 <router-link
          :to="{
			name: 'gyj',
            query: {
              id: item.id,
              title: item.title,
            },
          }"
          >{{ item.title }}</router-link
        >

params传参

params也有两种方法传值
跳转路由携带params参数，to的字符串写法

 <router-link :to="`/home/messages/detail/${item.id}/${item.title}`">{{
          item.title
        }}</router-link>

接收params传来值的路由组件写法

<li>消息编号:{{ $route.params.id }}</li>
<li>消息标题:{{ $route.params.title }}</li> 

跳转路由携带params参数，to的对象写法

<!-- 跳转路由携带params参数,to的对象写法，必须用name -->
         <router-link
          :to="{
            name: 'gyj',
            params: {
              id: item.id,
              title: item.title,
            },
          }"
          >{{ item.title }}</router-link
        >

props：是路由组件更方便的获取路由参数

props第一种写法，值为对象，该对象的key-value都以props的形式传给被传参路由组件

//props第一种写法，值为对象,该对象中的key-value都以props的形式传给Detail组件
               props: {
                a: 1,
                b: 'hello',
              }, 

被传参路由组件接收props写法

<template>
  <ul>
    <li>{{ a }}</li>
     <li>{{ b }}</li>
  </ul>
</template>

<script>
export default {
  name: 'Detail',
  // props只读属性,不能被修改
  props: ['a', 'b'],

  },
 
};
</script>

props第二种写法，值为布尔值，若布尔值为真，就会把路由组件收到的所有params参数以props的形式传给被传参路由组件

{
 path: 'detail/:id/:title',
 component: Detail,
 props: true,
}

<li>消息编号:{{ id }}</li>
<li>消息标题:{{ title }}</li>

 props: ['id', 'title'],

props第三种写法，值为函数

  props($route) {
                return {
                  id: $route.query.id,
                  title: $route.query.title,
                };
              },

<li>消息编号:{{ id }}</li>
<li>消息标题:{{ title }}</li>

 props: ['id', 'title'],