您现在的位置是:首页 > 正文

Vue(九)——页面路由(1)

2024-04-01 01:22:16阅读 2

目录

路由的简介

路由基本使用

几个注意点

嵌套(多级)路由

路由的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

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

 ./components/About.vue

<template>
	<h2>我是About的内容</h2>
</template>

<script>
	export default {
		name:'About'
	}
</script>

  ./components/Home.vue

<template>
	<h2>我是Home的内容</h2>
</template>

<script>
	export default {
		name:'Home'
	}
</script>

 App.vue

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
					<!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

					<!-- Vue中借助router-link标签实现路由的切换 router-link会转成a标签-->
		  <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
                    <!-- active-class为该元素被激活的样式-->
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
						<!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		name:'App',
	}
</script>

1.下载vue-routernpm i vue-router

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

3.编写router配置项:

//引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建router实例对象,去管理一组一组的路由规则
   const router = new VueRouter({
   	routes:[
   		{
   			path:'/about',
   			component:About
   		},
   		{
   			path:'/home',
   			component:Home
   		}
   	]
   })
   
   //暴露router
   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

<template>
	<div>
		<h2>Home组件内容</h2>
		<div>
			<ul class="nav nav-tabs">
				<li>
					<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
				</li>
				<li>
					<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
				</li>
			</ul>
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Home',
	}
</script>

./pages/Message.vue

<template>
	<div>
		<ul>
			<li>
				<a href="/message1">message001</a>&nbsp;&nbsp;
			</li>
			<li>
				<a href="/message2">message002</a>&nbsp;&nbsp;
			</li>
			<li>
				<a href="/message/3">message003</a>&nbsp;&nbsp;
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'Message'
	}
</script>

./pages/New.vue

<template>
	<ul>
		<li>news001</li>
		<li>news002</li>
		<li>news003</li>
	</ul>
</template>

<script>
	export default {
		name:'News'
	}
</script>

./router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
				}
			]
		}
	]
})

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

routes:[
   	{
   		path:'/about',
   		component:About,
   	},
   	{
   		path:'/home',
   		component:Home,
   		children:[ //通过children配置子级路由
   			{
   				path:'news', //此处一定不要写:/news
   				component:News
   			},
   			{
   				path:'message',//此处一定不要写:/message
   				component:Message
   			}
   		]
   	}
   ]

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

<template>
	<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<!-- 跳转路由并携带query参数,to的字符串写法 -->
				<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

				<!-- 跳转路由并携带query参数,to的对象写法 -->
				<router-link :to="{
					path:'/home/message/detail',
					query:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				</router-link>
			
			</li>
		</ul>
		<hr>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				messageList:[
					{id:'001',title:'消息001'},
					{id:'002',title:'消息002'},
					{id:'003',title:'消息003'}
				]
			}
		},
	}
</script>

./router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
					children:[
						{
							path:'detail',
							component:Detail,
						}
					]
				}
			]
		}
	]
})

1. 传递参数

<!-- 跳转并携带query参数,to的字符串写法 -->
   <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
   				
   <!-- 跳转并携带query参数,to的对象写法 -->
   <router-link 
   	:to="{
   		path:'/home/message/detail',
   		query:{
   		   id:666,
               title:'你好'
   		}
   	}"
   >跳转</router-link>

2. 接收参数

   $route.query.id
   $route.query.title

命名路由

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

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

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

2. 如何使用

         1. 给路由命名:

    {
      	path:'/demo',
      	component:Demo,
      	children:[
      		{
      			path:'test',
      			component:Test,
      			children:[
      				{
                            name:'hello' //给路由命名
      					path:'welcome',
      					component:Hello,
      				}
      			]
      		}
      	]
      }

         2. 简化跳转:

      <!--简化前,需要写完整的路径 -->
      <router-link to="/demo/test/welcome">跳转</router-link>
      
      <!--简化后,直接通过名字跳转 -->
      <router-link :to="{name:'hello'}">跳转</router-link>
      
      <!--简化写法配合传递参数 -->
      <router-link 
      	:to="{
      		name:'hello',
      		query:{
      		   id:666,
                  title:'你好'
      		}
      	}"
      >跳转</router-link>

路由的params参数

路径直接携带参数

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

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

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

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

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

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

 {
   	path:'/home',
   	component:Home,
   	children:[
   		{
   			path:'news',
   			component:News
   		},
   		{
   			component:Message,
   			children:[
   				{
   					name:'xiangqing',
   					path:'detail/:id/:title', //使用占位符声明接收params参数
   					component:Detail
   				}
   			]
   		}
   	]
   }

2. 传递参数

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

   <!-- 跳转并携带params参数,to的字符串写法 -->
   <router-link :to="/home/message/detail/666/你好">跳转</router-link>
   				
   <!-- 跳转并携带params参数,to的对象写法 -->
   <router-link 
   	:to="{
   		name:'xiangqing',
   		params:{
   		   id:666,
               title:'你好'
   		}
   	}"
   >跳转</router-link>

3. 接收参数

   $route.params.id
   $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组件。

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

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

网站文章

  • http:IP开头的路径使用js-audio-recorder报浏览器不支持getUserMedia

    http:IP开头的路径使用js-audio-recorder报浏览器不支持getUserMedia

    因为浏览器不支持http:IP开头的路径,认为安全性不高 只支持浏览器:file:,https:,http://localhost 解决办法: 在谷歌浏览器的地址栏中输入:chrome://flags/#unsafely-treat-insecure-origin-as-secure就好了,或者用http: 域名也可以解决 ...

    2024-04-01 01:21:51
  • 数组笔记

    js中用变量来代表一个值(数据),进行操作 怎么声明一个变量 怎么用变量代表一个值 怎么区别写的代码中,哪些是数据,哪些是变量 代码中除了值(数据)以外的”单词”,都是变量 变量的声明及赋值方式: 声明+赋值 ...

    2024-04-01 01:21:44
  • 零信任的基本概念【新航海】

    零信任的基本概念【新航海】

    「零信任」既不是技术也不是产品,而是一种安全理念。任何访问业务、数据、网络、代码的“源”都需要做验证,以此证时这个“源”是安全的后,再将其接入到需要访问的某个特定应用、数据、网络、代码上;在访问特定应用、数据、网络、代码的过程中,零信任会持续验证身份,直到停止使用或被中断。...

    2024-04-01 01:21:38
  • LeetCode--Python解析【Contains Duplicate】

    LeetCode--Python解析【Contains Duplicate】

    题目:方法:把给定list中的元素依次取出作为key值放入定义好的dict中,不需要value可赋None检查是否有重复的key存在class Solution: def containsDuplicate(self, nums): """ :type nums: List[int] :rtype: bool """ ...

    2024-04-01 01:21:12
  • [leetcode]#168. Excel Sheet Column Title

    题目翻译 给定一个正整数,返回其在Excel表格中作为列序号时对应的列标题。比如: 1 -> A 2 -> B 3 -> C … 26 -> Z 27 -> AA 28 -> AB思路方法 首先,我们要知道Excel里这个对应关系是什么样的。从A-Z对应1-26,当列标题进一位变成AA时,列对应的数字变成27。所以这个题本质上是一个10进制转26进制的问题,不过A对

    2024-04-01 01:21:06
  • Layui概述---学习笔记

    Layui概述---学习笔记

    Layui框架-图标组件&amp;按钮组件Layui概述Layui的获取Layui的目录结构Layui的引入 Layui概述 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,...

    2024-04-01 01:20:58
  • 工作2年的java程序员怎么提高技术?

    工作2年的java程序员怎么提高技术?

    首先你基础要扎实.这里的基础不是说Java基础.而是算法,数据结构,典型的设计模式等原理并能用代码实现.这个开发两年了,可以重新温故一下了.这方面资料很多,可以到某些电商平台,搜索对应的热销书籍,或者...

    2024-04-01 01:20:33
  • TCP的拥塞控制

    TCP的拥塞控制

    介绍了拥塞控制的概念以及拥塞控制的四个算法

    2024-04-01 01:20:25
  • 快手19春招实习笔试(Leetcode 136 && Leetcode 665)

    快手19春招实习笔试(Leetcode 136 && Leetcode 665)快手3.30晚笔试编程题,比较简单,两道都是Leetcode原题。1.Leetcode 136 Single NumberGiven a non-empty array of integers, every element appears twice except for one. Find t...

    2024-04-01 01:20:18
  • 2020年牛客网校招编程笔试题相关问题

    2020年牛客网校招编程笔试题相关问题

    这里主要是介绍一些关于牛客网上面编程题笔试系统的一些容易踩的坑。希望大家春招顺利!据说点一下关注可以拿到满意的 offer! 1. 接口类型测试 牛客网的编程题目分为两种形式,第一种形式是完善核心代码...

    2024-04-01 01:20:10