首页 > 其他分享 >Vue学习笔记（十一）：路由管理

Vue学习笔记（十一）：路由管理

时间：2023-10-16 13:56:37浏览次数：27  
标签：Vue title 笔记 vue import 组件 Home 路由

   

1 Vue路由基本使用

1.1 安装

Vue中默认并不提供路由功能，需要安装其插件Vue-router，如下所示，其中“@3”表示安装版本3

npm i vue-router@3

1.2 创建路由

在src目录下创建路由文件目录，目录名为“router”，并在该目录下创建“index.js”文件，文件内容如下所示，代码中，创建了一个路由器，其中配置了两个路由“about”和“home”,分别对应组件“About”和“Home”。

// 该文件专门用于创建整个应用的路由器
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
    	}
    ]
})

随后，还需要在main.js文件中引入并应用路由：

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    router:router
})

1.3 在组件模板中应用路由

在组件模板中，<router-link>标签实现跳转，<router-view>标注展现位置。<router-link>标签如下：

<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>

<router-view>标签如下：

<router-view></router-view>

About.vue内容如下：

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

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

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 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>
        </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>

页面效果如下图所示：

image.png

   

2 多级路由（嵌套路由）

在介绍页面路由之前，我们先在src目录下创建pages目录，然后将About.vue和Home.vue等页面组件，移动到pages目录下，然后对main.js文件内容进行对应修改。

添加Message.vue和News.vue两个组件，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>

News.vue文件内容如下：

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

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

因为Message.vue和News.vue两个组件都是Home组件的子组件，所以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>

路面最终效果如下所示：

image_0.8854106611332715.gif

   

3 路由传参

3.1 query传参

在某些场景下，路由也需要带参数，例如上述例子中，Message组件下，点击message001、message002、message003时，可以附带参数，实现跳转后统一Detail组件下的不同内容场景。我们把Message组件内容改为如下所示，<router-link>中to参数改为v-bind绑定，其内容改为一个对象配置项，配置项中，path为路由，指向Detail组件，query为传递的传输。

<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>

Detail组件内容如下，通过组件实例下的$route.query对象，可以读取通过路由传递过来的参数：

<template>
    <ul>
    	<li>消息编号：{{$route.query.id}}</li>
    	<li>消息标题：{{$route.query.title}}</li>
    </ul>
</template>

<script>
    export default {
    	name:'Detail',
    	mounted() {
    		console.log(this.$route)
    	},
    }
</script>

Detail组件的路由，也需要在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,
    					}
    				]
    			}
    		]
    	}
    ]
})

页面效果如下图所示：

image_0.03380499144792881.gif

3.2 param传参

vue中也可以使用param参数进行参数，这种方式比query方式更加优雅一些。使用这种方式是，在router/index.js配置文件中，在对Detail组件配置path参数是，进行说明。千万注意，在使用param方式进行传参时，<router-link>标签内不能再使用path配置路由了，一定要使用name参数。：

// 该文件专门用于创建整个应用的路由器
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:[
    	{
    		name:'guanyu',
    		path:'/about',
    		component:About
    	},
    	{
    		path:'/home',
    		component:Home,
    		children:[
    			{
    				path:'news',
    				component:News,
    			},
    			{
    				path:'message',
    				component:Message,
    				children:[
    					{
    						name:'xiangqing',
    						path:'detail/:id/:title',  // 此处进行配置，说明要接受id和title两个参数
    						component:Detail,
    					}
    				]
    			}
    		]
    	}
    ]
})

在Massage.vue中，读取param传递参数方式如下所示：

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

    			<!-- 跳转路由并携带params参数，to的对象写法 -->
    			<router-link :to="{
    				name:'xiangqing',
    				params:{
    					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>

Detail组件中读取数据的方式也要跟着变化：

<template>
    <ul>
    	<li>消息编号：{{$route.params.id}}</li>
    	<li>消息标题：{{$route.params.title}}</li>
    </ul>
</template>

<script>
    export default {
    	name:'Detail',
    	mounted() {
    		// console.log(this.$route)
    	},
    }
</script>

页面效果如下图所示：

image_0.6706082953173407.gif

3.3 props接收参数

在上述介绍query和param传参数，我们都是使用$router.query或$router.param进行接收参数，每次接收参数都要写这两个对象，不免有些麻烦。为简便代码，vue提供props进行接收参数，配置改参数后，所有路由传递的参数，都将以props的形式传递给组件。

在接收参数的组件配置路由时，添加props配置项，例如在配置Detail组件路由时，添加props配置项，书写方式有三种，如下所示。注意，第二种方式只能用于param方式传参，第三种方式最灵活，可同时运用于param和query方式传参，也能添加其他参数。：

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

    //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。这种方式用的很少，因为传递的参数是写死的。
    // props:{a:1,b:'hello'}

    //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。注意，这种方式只能用于param方式传参。
    // props:true

    //props的第三种写法，值为函数
    props($route){
        return {
            id:$route.query.id,
            title:$route.query.title,
            a:1,
            b:'hello'
        }
    }

}

当然，这时候在Detail也需要配置props参数：

<template>
    <ul>
    	<li>消息编号：{{id}}</li>
    	<li>消息标题：{{title}}</li>
    </ul>
</template>

<script>
    export default {
    	name:'Detail',
    	props:['id','title'],
    }
</script>
   

4 路由命名

为路由命名可以简化代码，方便维护。命名的方式也很简单，在router/index.js路由配置内，添加一个name配置项即可，如下所示我们为About组件和Detail组件的路由进行命名：

// 该文件专门用于创建整个应用的路由器
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:[
    	{
    		name:'guanyu',
    		path:'/about',
    		component:About
    	},
    	{
    		path:'/home',
    		component:Home,
    		children:[
    			{
    				path:'news',
    				component:News,
    			},
    			{
    				path:'message',
    				component:Message,
    				children:[
    					{
    						name:'xiangqing',
    						path:'detail',
    						component:Detail,
    					}
    				]
    			}
    		]
    	}
    ]
})

命名后，我们可以对<router-link>标签进行改写，例如，Message.vue文件中的<router-link>标签改为如下：

<router-link :to="{
    name:'xiangqing',
    query:{
        id:m.id,
        title:m.title
    }
}">

App.vue中的跳转到About组件的<router-link>标签改为如下：

<router-link class="list-group-item" active-class="active" v-bind:to="{name: 'guanyu'}">About</router-link>
   

5 编程式路由导航

5.1 <router-link>的replace属性

<router-link>的replace属性可以控制路由跳转时操作浏览器历史记录的模式。浏览器的历史记录有两种写入方式，push和replace模式，push是追加历史记录，replace是替换当前记录，路由跳转时候，默认是push。当开启replace时，不可后退到前一条记录。

开启replace的方式是在<router-link>标签中，添加replace属性，并将值设置为true。

<router-link replace="true">Home</router-link>
<!--也可以进行简写：-->
<router-link replace>Home</router-link>

5.2 编程式路由导航

上文所述多有实例，都是用用<router-link>来实现跳转，<router-link>标签在解析后都会转化为a标签。但是，在许多场景中，我们需要使用其他标签来实现跳转，例如，点击按钮之后实现跳转。这种情况下，就可以使用组件实例的$router.push和$router.replace两个方法来实现跳转。区别在于$router.push可以在浏览器中进行回退，而$router.replace不能回退。

<template>
    <div>
    	<ul>
    		<li v-for="m in messageList" :key="m.id">
    			<p>{{m.title}} <button @click="showDetail(m.id, m.title)">点击显示详情页</button></p>
    		</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'}
    			]
    		}
    	},
    	methods: {
    		showDetail(id, title){
    			this.$router.push({   // 实现push方式跳转
    				name: 'xiangqing',
    				query:{
    					id,
    					title
    				}
    			})
    		}
    	},
    }
</script>

动画.gif

当然，$router也提供了其他功能函数，例如$router.forward和$router.back分别用于操作浏览器记录进行前进和回退，这里不再演示。

5.3 缓存路由组件

在一些组件里，存在输入框，当我们输入文本之后，如果进行前进或者后退操作，那么输入框的内容就会被清空。怎么在前进后退操作过程中保留输入记录呢？这就需要使用到缓存路由组件技术了：在父组件模板中用<keep-alive>标签将需要缓存的子组件标签包裹。例如，我们在News组件中添加一些输入框，并输入一些内容，如果需要缓存这些内容，使得后续前进、后退跳转过程中，这些内容依然存在，那么就需要在App组件的模板中，使用<keep-alive>将显示News的<router-view>标签包裹，内容如下：

<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

<keep-alive>中可以使用include属性指定需要缓存的子组件（多个组件用数组指定），也可以不指定，另外，也可以用exclude来指定不需要缓存的组件，如果都不指定，表示缓存内部需要显示的所有子组件。

动画2.gif

但是注意，如果点击“About”然后在回到“Home-News”，输入的内容就不再了，因为缓存只针对于Home的子组件，点击“About”然后在回到“Home-News”时，Home组件都已经被销毁再重新实例化，所以输入的内容就不可能存在了。

  In [ ]:  

标签：Vue,title,笔记,vue,import,组件,Home,路由
From： https://www.cnblogs.com/chenhuabin/p/17767178.html

相关文章

  • Security Reduction学习笔记(2):预备知识(群环域,双线性配对,哈希函数)
    省略部分可参考密码协议学习笔记(1.4):密码学的一些数学基础-Isakovsky-博客园(cnblogs.com)有限域:$\mathbb{F}$是有限个元素的集合若$(\mathbb{F},+,*)$满足某些条件(条件略),则称其为有限域(FiniteField,或称Galois域)其零元,单位元分别记为$0_{\mathbb{F}},1_{\mat......
  • 《Mastering the FreeRTOS Real Time Kernel》读书笔记（5）中断管理
    6.中断管理在读这一章之前一直有一些疑惑，FreeRTOS中的中断是软中断吗，还是将外部硬中断的触发后，导入FreeRTOS的内部进行调度处理。如果是第一种，软中断和第三章讲的任务有区别吗，还是只是优先级比所有任务高。如果是第二种的话，外部中断的服务函数是不是不能写内容了，FreeRTOS的运行和......
  • 10月15日《需求分析与系统设计》阅读笔记二
    需求分析与系统设计（二）阅读笔记同样这本书也提到些关于uml“统一建模语言”，除了在上本书中的阅读笔记中所说的外，统一建模语言还是一种通用的、可视化的建模语言，用于对软件系统的人工制品进行详细说明、可视化、构造和文档化。它捕获对必须构建的系统的决策和理解，用于理解、设计、......
  • React学习笔记03-编写第一个react应用程序
    react开发需要引入多个依赖文件:react.js,react-dom.js,分别又有开发版本和生成版本，creat-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录情况，然后在里面重新创建一个index.js写入以下代码。//从react的包当中引入了React。只要你要写React.j......
  • JVM入门笔记
    1.JVM介绍Java虚拟机（JavaVirtualMachine简称JVM）是运行所有Java程序的抽象计算机，是Java编程语言的运行环境，它是Java最具吸引力的特性之一。JVM本质上是一个运行在计算机上的程序，他的职责是运行Java字节码文件，这就是Java跨平台的本质原因。由于Java是开放的，有越来越多的编程......
  • C#学习笔记之更改项目名称
    在VS中新建一个项目，在设计途中被要求更改项目名称，类似于变更整个解决方案项目名称、引用等等，以下为在设计途中变更项目名称的步骤：修改项目名称，主要有以下几个步骤：修改解决方案名称：直接选择解决方案，右键（F2，双击）重命名即可。 修改项目程序集名称和默认命名空间名称：选择解决方......
  • React学习笔记02-创建React项目
    1.全局安装create-react-appnpminstall-gcreate-reat-app2.创建一个React项目create-react-appmyapp 注意命名规范不能大写，中文等如果不想全局安装，可以直接使用npxnpxcreate-react-appmyapp 需要等待一段时间，这个过程实际上会安装三个东西react:react的顶级......
  • [Vue]模板语法和MVVM
    模板语法分为：①插值语法、②指令语法插值语法{{xxx}}指令语法v-bind:attr='xxx' 注意v-bind:只是一种指令，指令可以有很多种。v-bind:可以简写为:<body><divid="root"><h1>插值语法</h1><h3>{{name}}</h3><hr/&g......
  • 天地图 vue引入
    官网使用引入基础引入创建......
  • React学习笔记01-React的基本认识
    1.React起源与发展React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。2.React与传统MVC的关系轻量级的视图层库！AJavaScriptlibraryfor......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99