vue路由的基本使用

1.路由的基本使用

• 安装 vue-router：

  npm install vue-router
  

• 创建路由文件：
  在 src 目录下创建 router 目录，并在其中创建 index.js 文件。

• 在 main.js 中使用 vue-router：

  import { createApp } from 'vue';
  import App from './App.vue';
  //导入路由器对象
  import router from './router';
  //使用路由器对象
  createApp(App).use(router).mount('#app');
  

• 配置路由规则：
  在 router/index.js 文件中：

  //创建路由器对象，以及管理路由配置·url=>组件
  //1、引入函数
  import { createRouter, createWebHistory } from 'vue-router';
  
  //静态导入组件对象
  import Home from '../components/Home';
  import About from '../components/About';
  //配置路由规则
  const routes = [
    //配置一个具体的路由地址对应的页面
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
  ];
  
  //2、创建路由器对象
  const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    //一组路由规则设置到路由器对象中
    //routes:routes
    //如果key和value的值一致，可以简写
    routes,
  });
  //3.导出router
  export default router;
  

• 创建 Home 和 About 组件：

  • About.vue:

    <template>
      <div>
        <p class="lead">About内容...</p>
      </div>
    </template>
    
    <script>
      export default {
        name: 'About',
      };
    </script>
    

  • Home.vue:

    <template>
      <div>
        <p class="lead">Home内容...</p>
      </div>
    </template>
    
    <script>
      export default {
        name: 'Home',
      };
    </script>
    

• 编写 App.vue：

  <li class="active"><router-link to="/home">Home</router-link></li>
  <li><router-link to="/about">About</router-link></li>
  
  <!-- 组件内容展示区域 -->
  <router-view></router-view>
  

2.路由的默认路径

{
  // 路由默认路径
  path: '/',
  redirect: '/home'
}

3.嵌套路由

{
  path: '/home',
  component: Home,
  children: [
    {
      path: '',
      component: HomeProduct
    },
    {
      path: 'product',
      component: HomeProduct
    },
    {
      path: 'ad',
      component: HomeAd
    }
  ]
}

注意：子级的 path 不需要加 /。

4.路由懒加载

• 替换 import About from '../components/About' 为：

  component:()=>import("../views/About"),
  

5.动态路由匹配

• 带参数的动态路由匹配：

  {
    path: "/user/:id",
    component: () => import("../views/User.vue"),
    name: "user",
    props: true, // id的值可以作为props属性传递给组件
  },
  

• 在组件中接收参数：

  props: ["id"], // 定义组件属性,用于接收保存路由对象中的参数值
  
  this.user = this.users.filter((item) => {
    if (item.id == this.id) {
      return item;
    }
  });
  
  <!-- 每次获取值都需要通过路由对象获取 -->
  编号: {{ $route.params.id }}
  

1. 404 Not found 路由

   • 新建 NotFound.vue。

   • 配置404路由：

     {
       // 404, 匹配路由映射地址
       path: "/:pathMatch(.*)*",
       component: () => import("../views/NotFound.vue"),
     },
     

   • 输出404地址，并跳转页面：

     <h2>没有找到此资源...</h2>
     {{ $route.params.pathMatch }}
     

2. query方式的参数

   • 第一种方式：字符串拼接

     query传值
     链接地址需要使用字符串模板
     :to = "`xxx=${}`"
     
     <router-link :to="`/order/detail?id=${order.id}&username=${order.username}`">{{ order.username }}</router-link>
     

     输出值：

     <h2>编号：{{ $route.query.id }}</h2>
     <h2>姓名：{{ $route.query.username }}</h2>
     

   • 第二种方式：对象写法

     <router-link :to="{
       // path: '/order/detail',
       name: 'det',
       query: {
         id: order.id,
         username: order.username
       }
     }">{{ order.username }}</router-link>