声明式导航

@Route

<a>: Html 原生标签；页面会重新加载/刷新

观察页面加载情况：浏览器刷新按钮、浏览器开发者视图 F12 → 网络 Network
导航分类: 声明式导航：使用内置组件 <RouterLink>，通过配置 Router API 的路由属性 RouterLinkProps 实现

编程式导航：使用 vue-router 的组合函数 useRouter() 实现

用来渲染一个链接的组件，该链接在被点击时会触发导航

全局组件；不需要在组件模板中导入

不会刷新页面 - doesn't need to be reloaded from the server

RouterLinkProps 属性
item	desc
to	当点击该链接时应该进入的路由地址使用 to 属性代替 href 属性
replace?	默认是 push 模式，浏览器可以回退使用 replace 属性可以防止浏览器回退
activeClass?	链接在匹配当前路由时被应用到 class
exactActiveClass?	链接在严格匹配当前路由时被应用到 class 多用于嵌套路由中

? 表示可选属性；下同

1. 普通路由

<RouterLink to = "/home" >Home</RouterLink>
<RouterLink to = "/about" replace >About</RouterLink>

使用命名路由 - 更简洁

<RouterLink :to = "{name:'home'}" >Home</RouterLink>

2. 嵌套路由

指定完整路由

<RouterLink to = "/menu/goods" >Goods</RouterLink>
<RouterLink to = "/menu/vip" >Vip</RouterLink>

使用命名路由 - 更简洁

<RouterLink :to = "{name:'goods'}" >Goods</RouterLink>

3. 查询路由

静态数据

<RouterLink to="/team?id=100">Team</RouterLink>

动态绑定 - 拼接

<RouterLink  :to="'/menu/vip?id=' + id">Team</RouterLink>

动态绑定 - 模板字符串

<RouterLink :to="`/menu/vip?id=${id}`">Team</RouterLink>

动态绑定 - path

<RouterLink :to="{ name: 'vip', query: { id: 100 } }">Team</RouterLink>

动态绑定 - name

<RouterLink :to="{ path: '/menu/vip', query: { id: 100 } }">Team</RouterLink>

4. 动态路由

静态数据

<RouterLink to="/details/100">Details - 100</RouterLink>

动态绑定 - 拼接

<RouterLink :to="'/details/' + id">details - id=100</RouterLink>

动态绑定 - 模板字符串

<RouterLink :to="`/details/${id}`">details - id=100</RouterLink>

动态绑定 - 使用 name，不能使用 path，因为匹配不到

Path "/xxx" was passed with params but they will be ignored. Use a named route alongside params instead.

<RouterLink :to="{ name: 'details', params: { id: 100 } }">details - id</RouterLink>

用于显示用户当前所处路由的组件

全局组件；不需要在组件模板中导入

路由目标占位符

借助系统组件 <RouterView> 显示与 URL 对应的组件|路由出口 - where to render the current route component

有 <RouterLink> 路由，则必须有 <RouterView> 路由出口

还可以像缓存组件那样，缓存 <RouterView>，见后例

1. 单 <RouterView>

根据路由动态切换视图；必须有一个

应用更为常见，如单页应用 SPA

2. 多 <RouterView>

允许在同一个视图同时展示多个组件，每个组件对应不同的视图区域，提高了单页应用的复用性和可维护性

路由配置由 component 该为 components

{
  path: '/',
  name: 'home',
  components: {
    default: () => import('../views/Home.vue'),
    aside: () => import('../components/Aside.vue'),
    header: () => import('../components/Header.vue'),
    main: () => import('../components/Main.vue'),
  }
}

多个 <RouterView> 使用 name 属性区分，避免嵌套路由

<RouterView name="aside"></RouterView>
<RouterView name="header"></RouterView>
<RouterView name="main"></RouterView>

Drill

[] 路由设计

创建项目，使用路由

基本视图组件 HomeView.vue、MenuView.vue、MallView.vue、VipView.vue、MineView.vue

基本路由设计：/、/menu、/mall、/vip、/mine

. 为每个路由命名

. 分别使用静态导入和动态导入，查看页面刷新情况和网络加载情况

. 为主页更路由 / 指定重定向路由到 /home；对应的组件是 HomeView.vue

. 为菜单视图 MenuView.vue 创建到商品 Goods.vue、Vip.vue、Rank.vue、Favorite.vue 的子路由及对应的组件

. 为菜单视图 MenuView.vue 的商品 GoodsItem.vue 使用商品 id 创建到详情页视图 DetailsView.vue的动态路由 /details/:id

. 增加 404 异常路由处理

使用 <RouterLink>创建导航

调试路由正常

Summary & Homework

Summary

. to

. replace

. activeClass

. exactActiveClass

Homework

[] 标签页设计

定义路由实现标签页功能