VUE路由基本操作 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue路由</title>
		<script src="vue.min.js"></script>
		<script src="vue-router.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用 router-link 组件来导航. -->
			<!-- 通过传入 `to` 属性指定链接. -->
			<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
			<router-link to="/">one</router-link>
			<router-link to="/two">two</router-link>
			<router-link to="/three">three</router-link>
			<!-- 一定要定义路由的出口 -->
			<router-view></router-view>
		</div>
		<script>
			// 1. 定义（路由）组件。
			// 可以从其他文件 import 进来
			const T1 = {
				template: '<div>one</div>'
			}
			const T2 = {
				template: '<div>two</div>'
			}
			const T3 = {
				template: '<div>three</div>'
			}
			// 2. 定义路由
			// 每个路由应该映射一个组件。
			const routes = [{
				path: '/',
				redirect: '/one'
			}, {
				path: '/one',
				component: T1
			}, {
				path: '/two',
				component: T2
			}, {
				path: '/three',
				component: T3
			}]
			// 3. 创建 router 实例，然后传 `routes` 配置
			const router = new VueRouter({
				routes
			})
			// 4. 创建和挂载根实例。
			// 从而让整个应用都有路由功能
			const app = new Vue({
				el: '#app',
				router
			})
		</script>
	</body>
</html>
posted @   我也有梦想呀  阅读(49)  评论(0)  编辑  收藏  举报
相关博文：
·  后端程序员必会的前端知识-03：Vue2
·  Vue2路由嵌套是注意子路由path问题
·  vue路由
·  vue-路由(1)：基础用法
·  Vue.js 路由简介
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae