一、在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>
后续
- 讲解嵌套路由和命名路由