vue路由

柚子子@

于 2022-04-29 18:32:04 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/m0_67476502/article/details/124498495

本文详细介绍了单页应用（SPA）的概念，包括其优势，实现思路如利用ajax、锚点和hashchange事件，以及Vue Router在SPA中的应用。通过案例展示了如何创建和配置Vue组件及路由，实现页面动态更新和导航功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. SPA是什么

单页Web应用（single page application，SPA），就是只有一个Web页面的应用，
是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序

单页面应用程序：
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序：
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面

优势

减少了请求体积，加快页面响应速度，降低了对服务器的压力
更好的用户体验，让用户在web app感受native app的流畅

2. SPA实现思路和技术点

1 ajax
2 锚点的使用（window.location.hash #）
3 hashchange 事件 window.addEventListener("hashchange",function () {})
4 监听锚点值变化的事件，根据不同的锚点值，请求相应的数据
5 原本用作页面内部进行跳转，定位并展示相应的内容

案例（单页面应用程序）

1，引入依赖库

vue-router/vue

2，创建自定义组件，例如：Home和Abort组件
const Home = Vue.extend({});
注1：extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件
你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用car组件

注2：也可以用以前的方式创建和获得组件，效果也是一样的
Vue.component("button-counter", {...});//创建组件
var ButtonCounter = Vue.component('button-counter');//获得组件

3，定义路由(即路线),
var routes = [{path: '/about',component: About}];

注1：根路径“/”

4,创建路由器实例,然后传 `routes` 配置
const router = new VueRouter({routes:routes});

注1：route和router的区别
route：路线
router：路由器
路由器中包含了多个路线

5，创建和挂载根实例。
var vm = new Vue({router: router}).$mount('#app');

6，前面使用RouterLink和RouterView组件导航和显示

<router-link to="/home">go to Home</router-link>

<router-view></router-view>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.0/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			<div>
				<router-link to="/Home">首页</router-link>
				<router-link to="/About">关于</router-link>
			</div>
			<div>
				<router-view/>
			</div>
		</div>
	</body>
	<script>
		
		//1,引入vue.js和vue-router.js
		//2,创建自定义组件
		//作业：const/let/var的区别？？
		const Home=Vue.extend({template:'<div><h1>首页</h1><div>首页的内容区域</div></div>'});
		const About=Vue.extend({template:'<div><h1>关于</h1><div>关于的内容区域</div></div>'});
		//3，定义路由（路由即路线）
		var routes=[
			{path:'/Home',component:Home},
			{path:'/About',component:About},
		];
		//4,定义路由器（路由器包含多条路由）
		var router=new VueRouter({routes:routes});
		//5，创建和挂载根实例
		var vm=new Vue({
			//el:'#app',
			router:router,
			data:function(){
				return{
					ts:new Date().getTime()
				}
			},
			methods:{
				
			}
		}).$mount('#app');
	</script>
</html>

效果（任意切换）

vue中导航中的后退-前进-编程式导航
this.$router.go(-1) ：代表着后退
this.$router.go(1)：代表着前进
this.$router.push({ 切换到name为home的路由
name:'home'
});

第二种切换方法

切换第三种方法

默认一进来显示内容

replace作用：清空路由器点击之前的所有记录

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.0/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			<div>
				<button @click="goto">前进</button>
				<button @click="back">后退</button>
				<button @click="change">切换</button>
			</div>
			<div>
				<router-link to="/Home" tag="li">首页</router-link>
				<router-link to="/About" replace>关于</router-link>
			</div>
			<div>
				<router-view/>
			</div>
		</div>
	</body>
	<script>
		
		//1,引入vue.js和vue-router.js
		//2,创建自定义组件
		//作业：const/let/var的区别？？
		const Home=Vue.extend({template:'<div><h1>首页</h1><div>首页的内容区域</div></div>'});
		const About=Vue.extend({template:'<div><h1>关于</h1><div>关于的内容区域</div></div>'});
		//3，定义路由（路由即路线）
		var routes=[
			{name:'Home',path:'/Home',component:Home},
			{name:'About',path:'/About',component:About},
		];
		//4,定义路由器（路由器包含多条路由）
		var router=new VueRouter({routes:routes});
		//5，创建和挂载根实例
		var vm=new Vue({
			//el:'#app',
			router:router,
			data:function(){
				return{
					ts:new Date().getTime()
				}
			},
			methods:{
				goto:function(){
					this.$router.go(1);
				},
				back:function(){
					this.$router.go(-1);
				},
				change:function(){
					this.$router.push('About');
				}
			}
		}).$mount('#app');
	</script>
</html>

append

设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

变成 /vue04/js/vue.js