Vue路由-基本路由的使用

最新推荐文章于 2024-09-11 17:04:07 发布

licmi

最新推荐文章于 2024-09-11 17:04:07 发布

阅读量219

点赞数

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/licmi/article/details/108027630

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue路由-基本路由的使用

路由实现思路
1. 引入标签库
2. 创建组件
3. 添加url与组件的映射关系(组合路由)
4. 将路由的集合组合成路由器
5.将vue挂载到vue实例里
定义锚点
7、在页面中导入容器
8,全部代码
9，效果

路由实现思路

引入标签库
创建组件
添加url与组件的映射关系(组合路由)
将路由的集合组合成路由器
将vue挂载到vue实例里
定义锚点

1. 引入标签库

注意：导入的包要在vue下边

			<title>vue路由</title>
			<!-- 1.引入标签库 -->
			<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.4.2/vue-router.js"></script>

2. 创建组件

注意：是在vm实例上边创建

//2.创建组件
		const Home=Vue.extend({
			template:'<div><p>这是一个首页组件</p><div>博主所写内容组件内容</div></div>'
		});
		const Abort = Vue.extend({
			template:'<div><p>这是一个Abort组件</p><div>Abort组件内容</div></div>'
		});

3. 添加url与组件的映射关系(组合路由)

注意1：这个配置对象中的route表示路由匹配规则，每个路由规则，都是一个对象，这个规则对象都有必须的两个属性
1.path，表示监听哪个路由链接的地址
2.component，表示如果路由是前面匹配到的path，则展示component属性对应的那个组件
注意2：component的属性值，必须为一个组件的模板对象，不能是组件的引用名称

let routes = [
			{
				path:'/',
				component:Home
			},
			{
			
				path:'/Home',
				component:Home
			},
			{
				path:'/Abort',
				component:Abort
			},
		]

4. 将路由的集合组合成路由器

//4.将路由的集合组合成路由器
		const router = new VueRouter({routes});

5.将vue挂载到vue实例里

//5.将vue挂载到vue实例里
		new Vue({
			el:'#app',
			//{routes:routes},
			//简写方式
			router,
			data:{
				msg:'hello vue!!!'
			}
		})

定义锚点

<!-- 6.定义锚点 -->
			<router-view></router-view>

7、在页面中导入容器

由VueRouter提供的元素，用来做占位符，由路由规则匹配到的组件来展示。

<div id="app">
			<!--replace 无痕浏览  -->
			<router-link to="/Home" replace>首页</router-link>
			<router-link to="/Abort">关于本站</router-link>
			<!-- 6.定义锚点 -->
			<router-view></router-view>
		</div>

注意：router-link默认类似于a标签

8,全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue路由</title>
		<!-- 1.引入标签库 -->
			<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.4.2/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!--replace 无痕浏览  -->
			<router-link to="/Home" replace>首页</router-link>
			<router-link to="/Abort">关于本站</router-link>
			<!-- 6.定义锚点 -->
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		//2.创建组件
		const Home=Vue.extend({
			template:'<div><p>这是一个首页组件</p><div>博主所写内容组件内容</div></div>'
		});
		const Abort = Vue.extend({
			template:'<div><p>这是一个Abort组件</p><div>Abort组件内容</div></div>'
		});
		//3.添加url与组件的映射关系(组合路由)
		let routes = [
			{
				path:'/',
				component:Home
			},
			{
			
				path:'/Home',
				component:Home
			},
			{
				path:'/Abort',
				component:Abort
			},
		]
		//4.将路由的集合组合成路由器
		const router = new VueRouter({routes});
		//5.将vue挂载到vue实例里
		new Vue({
			el:'#app',
			//{routes:routes},
			//简写方式
			router,
			data:{
				msg:'hello vue!!!'
			}
		})
		
	</script>
</html>