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>