Vue-router(路由)

一、在Vue项目中引入路由

• vue-router主要用于管理URL，实现URL和组件的对应以及通过URL进行组件之间的切换，这使得构建单页面应用变得更加简单。
• 第一步：安装路由

npm install --save vue-router

• 第二步：配置独立的路由文件

// router/index.js
import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/home.vue";

// 结合相关页面配置对应的路由
const routes = [
  {
    path: "/",
    name: "首页",
    component: Home,
    /*
    懒加载或者异步加载，就是要用时才访问，这么可以提高效率
    component: () => import("../views/home.vue")  
    */
  }
];

// 要导出才能使用
export default createRouter({
  history: createWebHashHistory(),
  routes,
});

• 第三步：引入路由到项目

import { createApp } from 'vue';
import App from './App.vue';
import router  from './router';
import './assets/main.css';

// 创建 Vue 应用实例
const app = createApp(App)

// 使用路由
app.use(router)

// 挂载应用到 DOM
app.mount('#app')

• 第四步：指定路由显示入口

<router-view><router-view>
或者
<router-view />

• 第五步：指定路由跳转

<RouterLink to="/">首页</RouterLink>

其实这是一种静态路由，因为东西是写死的不会有任何的变化。

二、 动态路由

刚刚上面的实际上只有router-link中的to属性和js中定义的路由中的path一样时，才会显示对应的component。但实际开发时，这种方式是明显不足的，例如当用户去访问网站并且登录成功后，在页面中会显示“欢迎您”+用户名，不同的登录用户就会不一样的用户名，这就相当于一个组件，这里假设是User组件；此时需要使用id来区分不同的用户，都会导航到同一个User组件，这种情况下在配置路由的时候，需要把id作为参数传入，这就需要利用动态路由来实现了。动态路由传参分为两种：query方式和params方式。

query方式传参

（不需要额外修改index.js文件）
路由传参步骤如下：

• a) 在跳转过程中携带参数

<template>
	<p><RouterLink to="/newsDatails?name-baidu">百度新闻</RouterLink>
	<p><RouterLink to="/newsDatails?name-wangyi">网易新闻</RouterLink>
</template>

• b) 在详情页读取路由携带的参数

<template>
	<p>{{ $route.query.name }}新闻详情......</p>
</template>

params方式传参

路由传参步骤如下：

• a) 在路由配置中指定参数的key

{
	path:'/newsDatails/:name',   // :name就是key
	component: ()=>import('../components/newsDatails.vue')
}

• b) 在跳转过程中携带参数

<template>
	<p><RouterLink to="/newsDatails/baidu">百度新闻</RouterLink>
	<p><RouterLink to="/newsDatails/wangyi">网易新闻</RouterLink>
</template>

• c) 在详情页读取路由携带的参数

<template>
	<p>{{ $route.query.name }}新闻详情......</p>
</template>

后续

• 讲解嵌套路由和命名路由