Vue路由

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 原本用作页面内部进行跳转,定位并展示相应的内容

3. 路由思路

1、确保引入Vue.vue-router的js依赖
2、首先需要定义组件(就是展示不同的页面效果)
3、需要将不同的组件放入一个容器中(路由集合)
4、将路由集合组装成路由器
5、将路由挂载到Vue实例中
6、定义锚点
7、跳转

代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue路由</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcss.com/vue-router/3.1.1/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/Home" replace>首页</router-link>
			<router-link to="/Abort">关于本站</router-link>
		<router-view></router-view>

		</div>
	</body>
	<script type="text/javascript">
		// 创建组件
		const Home = Vue.extend({
			template: '<div><p>首页</p><div>博主所写博客内容</div></div>'
		});

		const Abort = Vue.extend({
			template: '<div><p>关于本站</p><div>博主相关信息,运营内容</div></div>'
		});
		// 添加URL与组件的映射关系(组合路由)
		let routes = [{
				path: '/',
				component: Home
			},
			{
				path: '/Home',
				component: Home
			},
			{
				path: '/Abort',
				component: Abort
			}
		]
		// 将路由的集合组合成路由器
		const router = new VueRouter({
			routes
		});
		new Vue({
			el: '#app',
			router,
			data: {
				msg: 'hello vue!!!'
			},

		})
	</script>
</html>

在这里插入图片描述
在这里插入图片描述

### Vue.js 路由使用指南及配置示例 Vue Router 是 Vue.js 官方提供的路由管理器,用于在单页面应用中实现导航和页面切换功能。以下是关于 Vue.js 路由的详细使用方法和配置示例。 #### 1. 安装 Vue Router 如果项目是通过 Vue CLI 创建的,可以使用以下命令安装 Vue Router: ```bash npm install vue-router ``` #### 2. 配置路由 创建一个 `router.js` 文件来定义路由规则。例如: ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from './views/Home.vue'; import About from './views/About.vue'; import Contact from './views/Contact.vue'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` #### 3. 在 Vue 实例中使用路由路由实例注入到 Vue 实例中,并指定挂载元素作为路由出口。例如: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` #### 4. 创建路由组件 在 `views` 文件夹中创建 `Home.vue`、`About.vue` 和 `Contact.vue` 组件。例如,`About.vue` 的内容如下: ```vue <template> <div> <h1>关于页面</h1> <p>这是关于页面的内容。</p> </div> </template> <script> export default { name: 'About' }; </script> ``` #### 5. 使用 `<router-view>` 渲染组件 在主应用文件(如 `App.vue`)中,使用 `<router-view>` 标签来渲染匹配的路由组件: ```vue <template> <div id="app"> <nav> <router-link to="/">首页</router-link> | <router-link to="/about">关于</router-link> | <router-link to="/contact">联系我们</router-link> </nav> <router-view></router-view> </div> </template> ``` #### 6. 动态路由与参数传递 可以通过动态路由的方式传递参数。例如,定义一个带有参数的路由规则: ```javascript const routes = [ { path: '/user/:id', component: User } ]; ``` 在组件中可以通过 `this.$route.params.id` 获取参数值[^1]。 #### 7. 嵌套路由 嵌套路由允许在一个路由组件中嵌套其他路由组件。例如: ```javascript const routes = [ { path: '/user/:id', component: User, children: [ { path: 'profile', component: UserProfile }, { path: 'posts', component: UserPosts } ] } ]; ``` #### 8. 导航守卫 Vue Router 提供了导航守卫功能,用于在路由切换时执行逻辑。例如,全局前置守卫: ```javascript router.beforeEach((to, from, next) => { if (to.path === '/about' && !isAuthenticated) { next('/login'); } else { next(); } }); ``` #### 9. 滚动行为 可以通过配置滚动行为,在路由切换时控制页面滚动位置。例如: ```javascript const router = createRouter({ history: createWebHistory(), routes, scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition; } else { return { top: 0 }; } } }); ``` ### 示例代码总结 以上是一个完整的 Vue.js 路由配置和使用示例[^1]。通过这些步骤,可以快速搭建一个支持多页面切换的单页面应用。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值