VUE-路由选择

最新推荐文章于 2024-05-12 19:07:45 发布

Kateri_a

最新推荐文章于 2024-05-12 19:07:45 发布

阅读量149

点赞数

文章标签： javascript vue.js p2p

本文链接：https://blog.csdn.net/ChenBo8520/article/details/125196995

版权

路由选择

实现ca和cb可以在一个页面上切换

首先创建两个组件ca,cb

配置路由规则 const routers path

创建路由模块实例const router （history,routes) 这里的history是浏览记录

放到某个组件中 const app{data{},router}

将app挂载，识别路由

在app设置路由可视化<router-view></router-view>

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
		<!--引用一个路由库  -->
		<script src="https://unpkg.com/vue-router@next"></script>
		
	</head>
	<body>
		<div id = "app">
			<router-link to = '/ca'>梦华录</router-link>
			&nbsp;
			<router-link to = '/cb'>平凡的世界</router-link>
			<br/>
			<!--路由的可视化 -->
			<router-view></router-view>
		</div>
		
		<script>
			const ca = {
				template:`<p>团了么</p>`
			}
			const cb = {
				template:`<p>春风得意马蹄疾，不信人间有别离。</p>`
			}
			//给组件定义路由常量
			//这是一个数组，给多个组件配置地址
			//每个组件配置一个映射路径
			const routes = [
				{path:'/ca',component:ca},
				{path:'/cb',component:cb}
			]
			//路由的工作方式
			const history = VueRouter.createWebHistory()
			
			
			//创建路由对象模块实例，给实例传入配置好的路由规则routes
			const router=VueRouter.createRouter({
				history,
				routes
			})
			const app={
				data(){
					return{
						
					}
				},
				router
			}
			let vm = Vue.createApp(app).use(router)
			vm.mount('#app')
		</script>
	</body>
</html>