devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue（九）——页面路由（1）

作者：羊村懒王 | 2024-03-18 10:54:33

赞

踩

页面路由

目录

路由的简介

路由基本使用

几个注意点

嵌套（多级）路由

路由的query参数

命名路由

路由的params参数

路由的props配置

路由的简介

        理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。

前端路由：key是路径，value是组件。

  1. 理解：value 是 component，用于展示页面内容
  2. 工作过程：当浏览器的路径改变时，对应的组件就会显示

        生活中的路由和路由器是为了完成多台设备的上网，而编码中的路由和路由器是完为了完成实现SPA应用的导航区与展示区的切换。

对SPA应用的理解

  1. 单页 Web 应用（single page web application，SPA）
  2. 整个应用只有一个完整的页面
  3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  4. 数据需要通过ajax请求获取

路由基本使用

提出如下需求：

将html粘贴到App.vue

 

        在main.js当中引入router之后可以使用一个全新的对象router。但不可像下图一样设置成字符串，需要自己去创建一个路由。

创建index.js专门用于创建整个应用的路由器 （routes为数组形式）

./router/index.js

  1. // 该文件专门用于创建整个应用的路由器
  2. import VueRouter from 'vue-router'
  3. //引入组件
  4. import About from '../components/About'
  5. import Home from '../components/Home'
  6.  
  7. //创建并暴露一个路由器
  8. export default new VueRouter({
  9. 	routes:[
  10. 		{
  11. 			path:'/about',
  12. 			component:About
  13. 		},
  14. 		{
  15. 			path:'/home',
  16. 			component:Home
  17. 		}
  18. 	]
  19. })

 ./components/About.vue

  1. <template>
  2. 	<h2>我是About的内容</h2>
  3. </template>
  4.  
  5. <script>
  6. 	export default {
  7. 		name:'About'
  8. 	}
  9. </script>

  ./components/Home.vue

  1. <template>
  2. 	<h2>我是Home的内容</h2>
  3. </template>
  4.  
  5. <script>
  6. 	export default {
  7. 		name:'Home'
  8. 	}
  9. </script>

 App.vue

  1. <template>
  2.   <div>
  3.     <div class="row">
  4.       <div class="col-xs-offset-2 col-xs-8">
  5.         <div class="page-header"><h2>Vue Router Demo</h2></div>
  6.       </div>
  7.     </div>
  8.     <div class="row">
  9.       <div class="col-xs-2 col-xs-offset-2">
  10.         <div class="list-group">
  11. 					<!-- 原始html中我们使用a标签实现页面的跳转 -->
  12.           <!-- <a class="list-group-item active" href="./about.html">About</a> -->
  13.           <!-- <a class="list-group-item" href="./home.html">Home</a> -->
  14.  
  15. 					<!-- Vue中借助router-link标签实现路由的切换 router-link会转成a标签-->
  16. 		  <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
  17.           <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
  18.                     <!-- active-class为该元素被激活的样式-->
  19.         </div>
  20.       </div>
  21.       <div class="col-xs-6">
  22.         <div class="panel">
  23.           <div class="panel-body">
  24. 						<!-- 指定组件的呈现位置 -->
  25.             <router-view></router-view>
  26.           </div>
  27.         </div>
  28.       </div>
  29.     </div>
  30.   </div>
  31. </template>
  32.  
  33. <script>
  34. 	export default {
  35. 		name:'App',
  36. 	}
  37. </script>

1.下载vue-router：npm i vue-router

2.应用插件：Vue.use(VueRouter)

3.编写router配置项：

  1. //引入VueRouter
  2.    import VueRouter from 'vue-router'
  3.    //引入Luyou 组件
  4.    import About from '../components/About'
  5.    import Home from '../components/Home'
  6.    
  7.    //创建router实例对象，去管理一组一组的路由规则
  8.    const router = new VueRouter({
  9.    	routes:[
  10.    		{
  11.    			path:'/about',
  12.    			component:About
  13.    		},
  14.    		{
  15.    			path:'/home',
  16.    			component:Home
  17.    		}
  18.    	]
  19.    })
  20.    
  21.    //暴露router
  22.    export default router

4. 实现切换（active-class可配置高亮样式）

vue

<router-link active-class="active" to="/about">About</router-link>

5. 指定展示位置

vue

   <router-view></router-view>

几个注意点

        1.靠路由规则匹配出来由路由器渲染出来的组件叫做路由组件，如果自己亲自写的标签叫做一般组件，一般情况下会将他们分为不同的文件夹。

        2.不用的路由组件或者说当切换切走的路由组件其实是被销毁了

 

3.各个组件上都多了两个东西，route（路由的配置信息）和router（路由器）           （打印出vc）

每个组件route是不一样的而router是一样的

1. 路由组件通常存放在```pages```文件夹，一般组件通常存放在```components```文件夹。

2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

3. 每个组件都有自己的```$route```属性，里面存储着自己的路由信息。

4. 整个应用只有一个router，可以通过组件的```$router```属性获取到。

嵌套（多级）路由

界面分为导航区和展示区，在展示区里还有导航区和展示区

把相应的结构粘贴到Home/About中的tempalte去

新建展示区的组件并把结构粘贴进来

以home为例，把子展示区用问号占位

        去index.js里制定路由规则，路由分为一级路由和二级路由等（多级路由），上一节写的都是一级路由，这个时候使用children配置项，这是一个数组，因为这也有可能有n多个子路由。注意子路由里的path不用再加斜杠，因为底层检测到children就会自动在地址加上斜杠。

在home里的导航标签改为router-link（），并在组件的呈现位置写上<router-view>标签

./pages/Home.vue

  1. <template>
  2. 	<div>
  3. 		<h2>Home组件内容</h2>
  4. 		<div>
  5. 			<ul class="nav nav-tabs">
  6. 				<li>
  7. 					<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
  8. 				</li>
  9. 				<li>
  10. 					<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
  11. 				</li>
  12. 			</ul>
  13. 			<router-view></router-view>
  14. 		</div>
  15. 	</div>
  16. </template>
  17.  
  18. <script>
  19. 	export default {
  20. 		name:'Home',
  21. 	}
  22. </script>

./pages/Message.vue

  1. <template>
  2. 	<div>
  3. 		<ul>
  4. 			<li>
  5. 				<a href="/message1">message001</a>&nbsp;&nbsp;
  6. 			</li>
  7. 			<li>
  8. 				<a href="/message2">message002</a>&nbsp;&nbsp;
  9. 			</li>
  10. 			<li>
  11. 				<a href="/message/3">message003</a>&nbsp;&nbsp;
  12. 			</li>
  13. 		</ul>
  14. 	</div>
  15. </template>
  16.  
  17. <script>
  18. 	export default {
  19. 		name:'Message'
  20. 	}
  21. </script>

./pages/New.vue

  1. <template>
  2. 	<ul>
  3. 		<li>news001</li>
  4. 		<li>news002</li>
  5. 		<li>news003</li>
  6. 	</ul>
  7. </template>
  8.  
  9. <script>
  10. 	export default {
  11. 		name:'News'
  12. 	}
  13. </script>

./router/index.js

  1. // 该文件专门用于创建整个应用的路由器
  2. import VueRouter from 'vue-router'
  3. //引入组件
  4. import About from '../pages/About'
  5. import Home from '../pages/Home'
  6. import News from '../pages/News'
  7. import Message from '../pages/Message'
  8.  
  9. //创建并暴露一个路由器
  10. export default new VueRouter({
  11. 	routes:[
  12. 		{
  13. 			path:'/about',
  14. 			component:About
  15. 		},
  16. 		{
  17. 			path:'/home',
  18. 			component:Home,
  19. 			children:[
  20. 				{
  21. 					path:'news',
  22. 					component:News,
  23. 				},
  24. 				{
  25. 					path:'message',
  26. 					component:Message,
  27. 				}
  28. 			]
  29. 		}
  30. 	]
  31. })

1. 配置路由规则，使用children配置项

  1. routes:[
  2.    	{
  3.    		path:'/about',
  4.    		component:About,
  5.    	},
  6.    	{
  7.    		path:'/home',
  8.    		component:Home,
  9.    		children:[ //通过children配置子级路由
  10.    			{
  11.    				path:'news', //此处一定不要写：/news
  12.    				component:News
  13.    			},
  14.    			{
  15.    				path:'message',//此处一定不要写：/message
  16.    				component:Message
  17.    			}
  18.    		]
  19.    	}
  20.    ]

2. 跳转（要写完整路径）

 <router-link to="/home/news">News</router-link>

路由的query参数

        当点击消息001，就在Detail.vue显示001的细节信息，002、003也是如此。只需要设置一个detail组件，给Detail.vue组件传递参数即可。

编写detail组件

这个detail属于message中的子路由，引入detail之后添加子路由

更改导航标签为router-link和to属性，在需要呈现的地方写入<router-view></router-view>

此时跳转没有携带参数，所以结果是写死的

路由是可以携带两种参数的，一种叫query参数，如下所示，这样就可以将参数交给路由组件了

        那么detail组件如何接收呢？还记不记得$route，他是路由的配置信息，在detail中打印出来如下所示：

取数据接收参数如下所示，to的字符串写法

        可是666和你好啊是假数据，这时需要将变量传进去，但是直接在to属性里换上m.id会被解析成字符串，所以要在to属性前加冒号，还需要用倒引号包裹，模板字符串里面混着js变量要用${}包裹。

        前面加冒号。就会将双引号里的东西当作js来解析，解析发现写的是字符串还是模板字符串，而且里面还混着js变量。

此时参数完美传过来 

其实还有一种写法，to的对象写法

        对象里边写两个属性，一个是path，一个是query。path写到要跳转的组件，query写成一个对象并写明要携带的参数。效果同上。

 ./pages/Message.vue

  1. <template>
  2. 	<div>
  3. 		<ul>
  4. 			<li v-for="m in messageList" :key="m.id">
  5. 				<!-- 跳转路由并携带query参数，to的字符串写法 -->
  6. 				<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
  7.  
  8. 				<!-- 跳转路由并携带query参数，to的对象写法 -->
  9. 				<router-link :to="{
  10. 					path:'/home/message/detail',
  11. 					query:{
  12. 						id:m.id,
  13. 						title:m.title
  14. 					}
  15. 				}">
  16. 					{{m.title}}
  17. 				</router-link>
  18. 			
  19. 			</li>
  20. 		</ul>
  21. 		<hr>
  22. 		<router-view></router-view>
  23. 	</div>
  24. </template>
  25.  
  26. <script>
  27. 	export default {
  28. 		name:'Message',
  29. 		data() {
  30. 			return {
  31. 				messageList:[
  32. 					{id:'001',title:'消息001'},
  33. 					{id:'002',title:'消息002'},
  34. 					{id:'003',title:'消息003'}
  35. 				]
  36. 			}
  37. 		},
  38. 	}
  39. </script>

./router/index.js

  1. // 该文件专门用于创建整个应用的路由器
  2. import VueRouter from 'vue-router'
  3. //引入组件
  4. import About from '../pages/About'
  5. import Home from '../pages/Home'
  6. import News from '../pages/News'
  7. import Message from '../pages/Message'
  8. import Detail from '../pages/Detail'
  9.  
  10. //创建并暴露一个路由器
  11. export default new VueRouter({
  12. 	routes:[
  13. 		{
  14. 			path:'/about',
  15. 			component:About
  16. 		},
  17. 		{
  18. 			path:'/home',
  19. 			component:Home,
  20. 			children:[
  21. 				{
  22. 					path:'news',
  23. 					component:News,
  24. 				},
  25. 				{
  26. 					path:'message',
  27. 					component:Message,
  28. 					children:[
  29. 						{
  30. 							path:'detail',
  31. 							component:Detail,
  32. 						}
  33. 					]
  34. 				}
  35. 			]
  36. 		}
  37. 	]
  38. })

1. 传递参数

  1. <!-- 跳转并携带query参数，to的字符串写法 -->
  2.    <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
  3.    				
  4.    <!-- 跳转并携带query参数，to的对象写法 -->
  5.    <router-link 
  6.    	:to="{
  7.    		path:'/home/message/detail',
  8.    		query:{
  9.    		   id:666,
  10.                title:'你好'
  11.    		}
  12.    	}"
  13.    >跳转</router-link>

2. 接收参数

  1.    $route.query.id
  2.    $route.query.title

命名路由

给路由命名只需要在js里添加name这个配置项即可，这个名字可以在跳转的时候简化编码。

在Message.vue里用name替换path（注意只在对象形式中这么用）

1. 作用：可以简化路由的跳转。

2. 如何使用

         1. 给路由命名：

  1.     {
  2.       	path:'/demo',
  3.       	component:Demo,
  4.       	children:[
  5.       		{
  6.       			path:'test',
  7.       			component:Test,
  8.       			children:[
  9.       				{
  10.                             name:'hello' //给路由命名
  11.       					path:'welcome',
  12.       					component:Hello,
  13.       				}
  14.       			]
  15.       		}
  16.       	]
  17.       }

         2. 简化跳转：

  1.       <!--简化前，需要写完整的路径 -->
  2.       <router-link to="/demo/test/welcome">跳转</router-link>
  3.       
  4.       <!--简化后，直接通过名字跳转 -->
  5.       <router-link :to="{name:'hello'}">跳转</router-link>
  6.       
  7.       <!--简化写法配合传递参数 -->
  8.       <router-link 
  9.       	:to="{
  10.       		name:'hello',
  11.       		query:{
  12.       		   id:666,
  13.                   title:'你好'
  14.       		}
  15.       	}"
  16.       >跳转</router-link>

路由的params参数

路径直接携带参数

js里用占位符让vue知道detail是路由的层级，下一层级是id，再下一层级是title

结果发现参数在params里，并且key的名称和占位符是一致的

所以在取值的时候也要改变，如图所示

如果使用to的对象写法，只需将query改为params即可。

注意，如果携带params参数，那么不可以使用path，只能用name。

1. 配置路由，声明接收params参数

  1.  {
  2.    	path:'/home',
  3.    	component:Home,
  4.    	children:[
  5.    		{
  6.    			path:'news',
  7.    			component:News
  8.    		},
  9.    		{
  10.    			component:Message,
  11.    			children:[
  12.    				{
  13.    					name:'xiangqing',
  14.    					path:'detail/:id/:title', //使用占位符声明接收params参数
  15.    					component:Detail
  16.    				}
  17.    			]
  18.    		}
  19.    	]
  20.    }

2. 传递参数

        特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

  1.    <!-- 跳转并携带params参数，to的字符串写法 -->
  2.    <router-link :to="/home/message/detail/666/你好">跳转</router-link>
  3.    				
  4.    <!-- 跳转并携带params参数，to的对象写法 -->
  5.    <router-link 
  6.    	:to="{
  7.    		name:'xiangqing',
  8.    		params:{
  9.    		   id:666,
  10.                title:'你好'
  11.    		}
  12.    	}"
  13.    >跳转</router-link>

3. 接收参数

  1.    $route.params.id
  2.    $route.params.title

路由的props配置

分清楚这个是路由的props而不是组件的props。

在js当中配置一个新的配置项props，他有三种写法：

1.值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。

同时在detail中添加props属性声明接收。

这种方法不推荐因为数据是写死的。 

2.值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。

3.值为函数，该函数返回的对象（返回值）中每一组key-value都会通过props传给Detail组件

传入参数$route，用来获取query参数，在函数里封装成对象通过props传给Detail组件。

作用：让路由组件更方便的收到参数。

  1. {
  2. 	name:'xiangqing',
  3. 	path:'detail/:id',
  4. 	component:Detail,
  5.  
  6. 	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
  7. 	// props:{a:900}
  8.  
  9. 	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
  10. 	// props:true
  11. 	
  12. 	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
  13. 	props(route){
  14. 		return {
  15. 			id:route.query.id,
  16. 			title:route.query.title
  17. 		}
  18. 	}
  19. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/262518
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号