Vue-Day05（2021-08-23）

最新推荐文章于 2024-07-11 11:14:36 发布

Ichitei

最新推荐文章于 2024-07-11 11:14:36 发布

阅读量93

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44572001/article/details/120002747

版权

1.路由理解

对于链接a标签来说，
正常操作：等待服务器响应，刷新页面更新内容。
vue路由操作：不用通过服务器响应，而是通过更换组件，更新页面内容。
https://www.jianshu.com/p/9feda2958879

2.路由构建步骤

1.引入路由

<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

注意：引入路由需要在引入vue之后，否则会报错。

2.定义路由组件
3.定义路由
4.创建router实例，然后传入router配置
5.创建和挂载根实例
6.视图部分数据的显示

<script>	
	/* 2.定义路由组件 */
	const Home = {template:"<div>首页面</div>"};
	const News = {template:"<div>新闻页面</div>"};
	
	/* 3.定义路由 */
	const routes = [
		{path:"/home",component:Home},
		{path:"/news",component:News}
	];
	
	/* 4.创建router实例，然后传入router配置 */
	const router = new VueRouter({
		routes		// routes:routes的缩写
	});
	
	//创建vue对象
	new Vue({
		el:"#app",
		
		/* 5.创建和挂载根实例 */
		router		//router:router
	})
</script>

<!-- 视图部分 -->
<div id="app">
	<!-- 6.视图部分数据的显示 -->
	<!-- 使用router-link来导航,通过to属性指定链接，router-link标签被渲染为a标签 -->
	<router-link to="/home">首页</router-link>
	<router-link to="/news">新闻页</router-link>
	
	<!-- 路由出口 -->
	<!-- 路由匹配到的组件会渲染到这里 -->
	<router-view>
</div>

3.路由增强版

注意：
1.$route.params.id – {path:"/news/:id",component:***}动态组件
2.定义首页子组件的访问路径：children:[]

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="js/vue.js"></script>
	<!-- 1.引入路由 -->
	<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
</head>

// 2.定义路由组件
const Home = {template: "#hometemp"};
const News = {template: "#newstemp"};
		
//2.1定义首页面子组件
const Login = {template:"#home_logintemp"};
const Reg = {template:"#home_regtemp"};
		
//2.2定义新闻页面子组件
const NewsDetail = {template:"#newsdetailtemp"}
		
//3.定义路由
const routes = [
	// 设置默认展示页面，如果没有指定路径，默认展示首页
	{path:"/",redirect:"/home"},
	
	//3.1定义首页路由
	{
		path:"/home",
		component:Home,
		//3.1.1定义首页子组件的访问路径
		children:[
			{path:"/",redirect:"/home/reg"},
			{path:"/home/login",component:Login},
			{path:"/home/reg",component:Reg}
		]
	},
	
	//3.2定义新闻页路由
	{
		path:"/news",
		component:News,
		//3.2.1定义新闻页子组件的访问路径
		children:[
			{path:"/news/:id",component:NewsDetail}
		]
	}
];
		
//4.创建路由实例，传入路由配置
const router = new VueRouter({
	routes
})
		
new Vue({
	el:"#app",
	//5.创建并挂载根实例
	router
})

<!-- 首页模板 -->
<template id="hometemp">
	<div>
		<div>首页面</div>
		<router-link to="/home/login">登录页面</router-link>
		<router-link to="/home/reg">注册页面</router-link>
		<!-- 路由出口 -->
		<router-view>
	</div>
</template>
		
<!-- 首页-登录页面模板 -->
<template id="home_logintemp">
	<div>
		这是登录页面
	</div>
</template>
		
<!-- 首页-注册页面模板 -->
<template id="home_regtemp">
	<div>
		这是注册页面
	</div>
</template>
		
<!-- 新闻页模板 -->
<template id="newstemp"> 
	<div>
		<div>新闻页</div>
		<ul>
			<li><router-link to="/news/001">01.天天向上</router-link></li>
			<li><router-link to="/news/002">02.湖南卫视</router-link></li>
			<li><router-link to="/news/003">03.芒果卫视</router-link></li>
		</ul>
		<router-view>
	</div>
</template>
		
<!-- 新闻详细页面模板 -->
<template id="newsdetailtemp">
	<div>
		<div>
			新闻详情页面
		</div>
		<div>
			{{$route.params.id}}的详细内容
		</div>
	</div>
</template>

<div id="app">
	<!-- 6.视图展示数据 -->
	<router-link to="/home">首页</router-link>
	<router-link to="/news">新闻页</router-link>
	<!-- 路由出口 -->
	<router-view>
</div>

4.编程式路由

通过js实现路由跳转link；
注意：路由传递参数获取参数的三种方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<!-- 1.引入路由 -->
		<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
	</head>
	<body>
		<!-- 视图部分 -->
		<div id="app">
			<!-- 定义按钮 -->
			<button @click="fn1()">跳转到首页</button>
			<button @click="fn2()">跳转到新闻</button>
			<button @click="fn3()">跳转到用户</button>
			
			<!-- 上一页  下一页 -->
			<button @click="fn4()">上一页</button>
			<button @click="fn5()">上一页</button>
			<button @click="fn6()">下一页</button>
			<button @click="fn7()">下一页</button>
			
			<!-- 6.路由出口 -->
			<router-view>
		</div>
	</body>
	<!-- 脚本部分 -->
	<script>
	
		/* 4.定义router实例，传入路由配置 */
		const router = new VueRouter({
			//3.定义路由
			routes:[
				//2.定义组件
				{
					path:"/index/:id",
					name:"index",
					//路由传递参数--获取参数
					component:{template:"<div>首页{{$route.params.id}}</div>"}
				},
				{
					path:"/news/:id",
					name:"news",
					//路由传递参数--获取参数
					component:{template:"<div>新闻{{$route.params.id}}</div>"}
				},
				{
					path:"/user",
					name:"user",
					//路由传递参数--获取参数
					component:{template:"<div>用户{{$route.query.id}}</div>"}
				}
			]
		});
		
		//创建vue对象
		new Vue({
			el:"#app",

			//5.创建并挂载根实例
			router,
			
			methods:{
				fn1(){
					//路由传递参数--传递参数
					this.$router.replace({name:"index",params:{id:Math.random()}})
				},
				fn2(){
					//路由传递参数--传递参数
					this.$router.push(`/news/${Math.random()}`);
				},
				fn3(){
					//路由传递参数--传递参数
					this.$router.replace({path:"/user",query:{id:Math.random()}})
				},
				//上一页
				fn4(){
				
					this.$router.go(-1);
				},
				fn5(){
					this.$router.back(-1);
				},
				//下一页
				fn6(){
					this.$router.go(1);
				},
				fn7(){
					this.$router.forward();
				}
			},
			//路由侦听
			watch:{
				$route(newRoute,oldRoute){
					console.log(newRoute)
					console.log(oldRoute);
				}
			}
		})
	</script>
</html>