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 @ 2022-04-15 09:14  我也有梦想呀  阅读(54)  评论(0)    收藏  举报