目的:改变URL,但页面不进行整体刷新
原理:
URL和hash值:URL的hash,相当于页面的锚点。本质是改变了 window.location 的herf 属性
HTML5 的 history:
history.pushState({},'','home')
history.pushState相当于栈的操作,先进后出,弹栈和入栈的操作。
history.pushState入栈;
history.back()出栈;
history.go(-1) 相当于 history.back();
history.forward 相当于history.go(1);
history.replaceState():不能返回;
1、安装vue-router
npm install vue-router --save
2、创建路由组件
新建src/views/路由组件.vue. 如:
3、创建路由实例,并配置路由映射关系
新建src/router/index.js
// 1. 导入“创建路由对象” 和 “创建hash对象”
import { createRouter, createWebHashHistory } from "vue-router";
import UserVue from '../views/UserVue.vue'
import OrderVue from '../views/UserVue.vue'
//创建路由对象(即路由器)
const router = new createRouter({
//配置路由跳转模式,这里使用 hash 模式
history: createWebHashHistory(),
//配置路由映射关系表
routes: [
{
path: '/user',
component: UserVue
},{
path: '/order',
component: OrderVue
}
]
})
//导出(暴露)路由
export default router;
4、在main.js中,使用 已配置的路由对象
//导入路由对象
import router from './assets/router'
const app = createApp(App);
//使用router
app.use(router);
app.mount('#app');
5、使用路由
6、router-link与router-view
<router-link>:该标签是一个vue-router中已经内置的组件,它会被渲染成一个<a>标签。
<router-view>:该标签会根据当前的路径,动态渲染出不同的组件。
网页的其他内容,比如顶部的标题/导航,或者底部的一些版权信息等会和<router-view>处于同一个等级。
在路由切换时,切换的是<router-view>挂载的组件,其他内容不会发生改变。