Vue总结（三）—— 路由

最新推荐文章于 2024-03-28 13:12:14 发布
最新推荐文章于 2024-03-28 13:12:14 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： 前端 文章标签： vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43776195/article/details/123337642
版权

文章目录

Vue总结（三）——路由

1、路由入门

理解： 一个路由（route）就是一组映射关系（key - value）

多个路由需要路由器（router）进行管理。

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

1.1 路由分类

1、后端路由：

  • 理解：value 是 function, 用于处理客户端提交的请求。
  • 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数（请求处理逻辑，类似于代理服务器的请求前缀和请求处理对象的关系）来处理请求, 返回响应数据。

2、前端路由：

  • 理解：value 是 component，用于展示页面内容。
  • 工作过程：当浏览器的路径改变时, 对应的组件就会显示
  • 声明式路由
    • 借助<router-link>实现路由跳转
  • 编程式路由
    • 不借助<router-link>实现路由跳转，让路由跳转更加灵活。
    • 调用路由器或者正在跳转的路由对象，对应的API实现路由跳转，如：$router.push。
  • 命名路由
    • 在配置路由的时候，给路由起个名字，简化跳转。
  • 缓存路由
  • 多级路由（二级路由、三级路由等）

1.2 基本使用

前提：项目是vue-cli项目

  1. 安装vue-router，命令：npm i vue-router
  2. 应用插件：Vue.use(VueRouter)
  3. 编写相关组件
  4. 编写router入口文件：创建router实例对象，编写路由规则
  5. 编写应用的根组件
    • router-link：实现路由切换
    • 指定路由组件的展示位置：router-view
1.2.1 安装 vue-router插件
npm i vue-router
1.2.2 应用 vue-router插件

在src目录下创建 main.js 项目主入口文件，编写如下代码。

应用 vue-router插件，注册路由器对象（router）。

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器（不写文件名，就默认找router目录下的index.js）
import router from './router'

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

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})
1.2.3 编写相关组件

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>
1.2.4 编写router入口文件

在src目录下创建router文件夹，在router文件夹中创建index.js（叫该名称的文件，引入的时候可以写到router文件夹，而不用写文件名，叫其他名称的话，要写到文件名）。

创建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
		}
	]
})
1.2.5 编写应用的根组件

实现路由切换：< router-link to="/about">About< /router-link>

并指定路由组件的展示位置：< router-view>< /router-view>

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>

1.3 几个注意点

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

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

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

  4. 整个应用只有一个router，可以通过组件的$router属性获取到（全局路由器对象）。

  5. this.$router 实际上就是全局路由对象任何页面都可以调用 push(), go()等方法；

  6. this.$route 表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等属性。

  7. 声明式路由：router-link

    <router-link to="/about">About</router-link> 
<!-- to没加上 : 则按照普通js字符串来解析 -->

    <!-- 跳转并携带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>
<!-- to加上 : 告诉vue，等号右边的是js表达式或对象，会按js语法进行解析(v-bind) -->
1.3.1 相关API（路由对象属性）

官方文档：编程式导航

$router：全局路由器对象，所有组件共享，整个应用仅有一个。

1、this.$router.push()：路由传值。

  • 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL

  • 当点击 < router-link :to="…" > 时，这个方法会在内部调用，即点击< router-link :to="…" > 等同于调用 router.push(…)

1. 声明式：< router-link :to="…" >
　　2. 编程式：router.push(…)
　　3. router.push(…)该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

2、$router.path

  • 类型：string
  • 字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”

$route：路由对象，每个组件都有各自的路由对象（多个）。

1、$route.fullPath

  • 类型：string
  • 完成解析后的 URL，包含查询参数和 hash 的完整路径。

2、$route.matched

  • 类型：Array

2、多级路由

配置路由规则，使用children配置项。

在开发环境配置好，并且完成前置文件和代码的编写之后，开始编写以下代码。

2.1 编写相关组件

2.1.1 一般组件

非路由相关组件，放在src下的components文件夹下。

Banner.vue

<template>
	<div class="col-xs-offset-2 col-xs-8">
		<div class="page-header"><h2>Vue Router Demo</h2></div>
	</div>
</template>

<script>
	export default {
		name:'Banner'
	}
</script>
2.1.2 路由组件

路由相关组件，放在src下的pages文件夹，和components文件夹同级。

About.vue

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

<script>
	export default {
		name:'About',
		/* beforeDestroy() {
			console.log('About组件即将被销毁了')
		},*/
		/* mounted() {
			console.log('About组件挂载完毕了',this)
			window.aboutRoute = this.$route
			window.aboutRouter = this.$router
		},  */
	}
</script>

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',
		/* beforeDestroy() {
			console.log('Home组件即将被销毁了')
		}, */
		/* mounted() {
			console.log('Home组件挂载完毕了',this)
			window.homeRoute = this.$route
			window.homeRouter = this.$router
		},  */
	}
</script>

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>

2.2 编写路由入口文件

创建路由器配置对象（router），配置路由跳转规则。

在src目录下创建router文件夹，在router文件夹中创建index.js。

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在此处表示news和message为/home的二级子路由，子路由的path不用加'/'
			children:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
				}
			]
		}
	]
})

2.3 编写应用的根组件

实现路由切换：< router-link to="/about">About< /router-link>

并指定路由组件的展示位置：< router-view>< /router-view>

App.vue

<template>
    <div>
        <div class="row">
            <Banner/>
        </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> -->

                    <!-- 1、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">
                        <!-- 2、指定组件的呈现位置 -->
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Banner from './components/Banner'
    export default {
        name:'App',
        components:{Banner}
    }
</script>

2.4 编写应用的主入口文件

在src目录下创建 main.js 项目主入口文件，编写如下代码。

应用 vue-router插件，注册路由器对象（router）。

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

3、路由的query参数

路由组件之间数据传递。

3.1 基本使用

  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

3.2 示例

编写相关组件

非路由组件。

Banner.vue

<template>
    <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
    </div>
</template>

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

路由组件。

About.vue

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

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

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>

Message.vue

路由跳转到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; -->

                <!-- 1、传递参数 -->
                <!-- 跳转路由并携带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>

News.vue

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

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

Detail.vue

接收Message传递过来的参数。

<template>
    <ul>
        <!-- 2、接收Message传递过来的参数 -->
        <li>消息编号：{{$route.query.id}}</li>
        <li>消息标题：{{$route.query.title}}</li>
    </ul>
</template>

<script>
    export default {
        name: 'Detail',
        mounted() {
            console.log(this.$route)
        },
    }
</script>
路由入口文件

配置一组路由跳转规则。

src/router/index.js

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,
                        }
                    ]
                }
            ]
        }
    ]
})
编写应用根组件

实现路由切换，

指定组件的呈现位置，

用于汇总和管理所有组件。

App.vue

<template>
    <div>
        <div class="row">
            <Banner/>
        </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>
    import Banner from './components/Banner'

    export default {
        name: 'App',
        components: {Banner}
    }
</script>
编写应用主入口文件

应用VueRouter插件

注册router（路由器）配置对象

注册根组件App.vue

//引入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
});

4、命名路由

给路由指定一个name。

  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>

<!-- 简化前，跳转路由并携带query参数，to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

5、路由的params参数

直接在配置路由的时候使用占位符，声明接收参数。

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

    index.js

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

  2. 传递参数

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

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

  3. 接收参数：（使用、获取）

    $route.params.id

    $route.params.title

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

6、路由的props配置

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

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

6.1 示例代码

Message.vue

跳转路由并携带params参数：router-link :to=“xxx”

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

index.js

src/router/index.js

props传递参数给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,
							//props的第一种写法，值为对象，
                            //该对象中的所有key-value都会以props的形式传给Detail组件。
							// props:{a:1,b:'hello'}

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

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

                        }
                    ]
                }
            ]
        }
    ]
})

Detail.vue

props接收参数

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

<script>
	export default {
		name:'Detail',
		props:['id','title'], //props接收参数
		computed: {
			// id(){
			// 	return this.$route.query.id
			// },
			// title(){
			// 	return this.$route.query.title
			// },
		},
		mounted() {
			// console.log(this.$route)
		},
	}
</script>

7、router-link的replace属性

  1. 作用：控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
  3. 如何开启replace模式：<router-link replace .......>News</router-link>

示例

Home.vue

<template>
    <div>
        <h2>Home组件内容</h2>
        <div>
            <ul class="nav nav-tabs">
                <!-- 开启replace模式 -->
                <li>
                    <router-link replace class="list-group-item" active-class="active" to="/home/news">News
                    </router-link>
                </li>
                <li>
                    <router-link replace 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>

Message.vue

<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',
					query:{
						id:m.id,
						title:m.title
					}
				}">
                    {{m.title}}
                </router-link>
                <button @click="pushShow(m)">push查看</button>
                <button @click="replaceShow(m)">replace查看</button>
            </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: {
            pushShow(m) {
                this.$router.push({
                    name: 'xiangqing',
                    query: {
                        id: m.id,
                        title: m.title
                    }
                })
            },
            replaceShow(m) {
                this.$router.replace({
                    name: 'xiangqing',
                    query: {
                        id: m.id,
                        title: m.title
                    }
                })
            }
        },
        beforeDestroy() {
            console.log('Message组件即将被销毁了')
        },
    }
</script>

8、编程式路由导航

  1. 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

  2. 具体编码：

    //$router的两个API
this.$router.push({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})

this.$router.replace({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

相关 API：

  1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
  2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
  3. this.$router.back(): 请求(返回)上一个记录路由
  4. this.$router.go(-1): 请求(返回)上一个记录路由
  5. this.$router.go(x): 请求下x个记录路由（x为正数）

9、缓存路由组件

  1. 作用：让不展示的路由组件保持挂载，不被销毁。

  2. 具体编码：

    <!-- 缓存多个路由组件 -->
<keep-alive :include="['News','Message']">

<!-- 缓存一个路由组件 -->
<keep-alive include="News"> 
    <!-- 指定组件的呈现位置 -->
    <router-view></router-view>
</keep-alive>

示例

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>
            <!-- 缓存多个路由组件 -->
            <!-- <keep-alive :include="['News','Message']"> -->

            <!-- 缓存一个路由组件 -->
            <keep-alive include="News">
                <!-- 指定组件的呈现位置 -->
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
</template>

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

10、两个新的生命周期钩子

  1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
  2. 具体名字：
    1. activated路由组件被激活时触发。
    2. deactivated路由组件失活时触发。

示例

当用户查看News组件的时候，【欢迎学习Vue】这几个字的透明度动态变化。

当用户离开News组件的时候，【欢迎学习Vue】这几个字的透明度停止变化。

可以使用路由组件所独有的两个钩子来实现：activated，deactivated。

News.vue

<template>
    <ul>
        <li :style="{opacity}">欢迎学习Vue</li>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
    </ul>
</template>

<script>
    export default {
        name: 'News',
        data() {
            return {
                opacity: 1
            }
        },
        /* mounted(){
            this.timer = setInterval(() => {
                console.log('@')
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        }, */
        activated() {
            console.log('News组件被激活了');
            this.timer = setInterval(() => {
                console.log('@');
                this.opacity -= 0.01;
                if (this.opacity <= 0) this.opacity = 1
            }, 16)
        },
        deactivated() {
            console.log('News组件失活了');
            clearInterval(this.timer)
        },
    }
</script>

11、路由器的两种工作模式

  1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
  2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
  3. hash模式（默认）：
    1. 地址中永远带着#号，不美观 。
    2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
    3. 兼容性较好。
  4. history模式：
    1. 地址干净，美观 。
    2. 兼容性和hash模式相比略差。
    3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

示例

src/router/index.js：

将路由器工作模式调成history，如下：

mode: 'history’

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'

//创建并暴露一个路由器
const router = new VueRouter({
    mode: 'history', //将路由器工作模式调成history
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About,
        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News,
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail,
                            //props的第三种写法，值为函数
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title,
                                    a: 1,
                                    b: 'hello'
                                }
                            }

                        }
                    ]
                }
            ]
        }
    ]
})

export default router

整理完成，如有建议，欢迎留言交流。

sunnyboy
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue路由守卫是什么？使用场景？全局和局部使用的区别是什么？
Lzen6719的博客
02-10 554
什么是路由守卫？也叫导航守卫，就是路由在跳转过程中的一些钩子函数，在这个过程中会触发这些函数能让你操作其他一些事情，可以过滤一些操作，简单来说就是，比如你想进入一些场所，门口有保安，保安会询问你一些基本问题才会让你通行，如果你要进入，则需要登记，路由守卫就是这个作用，路由守卫分前置全局路由，后置全局路由。
Web前端 ---- 【Vue】vue路由守卫（全局前置路由守卫、全局后置路由守卫、局部路由path守卫、局部路由component守卫）
weixin_68854196的博客
12-23 6184
本文介绍veu路由守卫
vue3获取所有路由
最新发布
qq_26905813的博客
03-28 769
vue3获取所有路由
Vue3全家桶之路由系统
江拥羡橙的博客
06-01 519
本节中，我们介绍了前端路由的由来，从开始的借用后端路由来实现页面刷新跳转，到后来的前后端分离，前端拥有了自己的路由系统，在SPA中被大量应用。然后我们介绍了前端路由的两种模式，hash模式和history模式，解释了两种方式实现前端路由的原理和区别，最后我们在Vue3中实现了hash模式的路由管理。
全局、独享、局部路由守卫
这个世界上有各种各样的人.
04-19 1478
1. 组件内的守卫是定义在组件内部，组件选项对象中的路由守卫 2. 组件内部路由守卫有三个，为：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave。 3. beforeRouteEnter组件创建前调用，不能使用组件实例this 4. beforeRouteUpdate路由被改变，但是组件被复用时调用，比如：动态路由 5. beforeRouteLeave导航离开时该组件调用
Vue进阶——Vue Router（路由）
秋书一叶的博客
04-26 3717
Vue Router 是 Vue.js 官方提供的路由管理器。它和 Vue.js 核心深度集成，可以方便地在 Vue.js 应用中使用路由功能，支持基于 HTML5 History API 的单页应用 (SPA) 以及传统的多页应用程序 (MPA)。使用 Vue Router 可以实现在单页应用中切换页面而不刷新页面，同时还支持路由参数、路由组件、嵌套路由等高级功能，方便开发者构建复杂的前端应用。
Vue后台管理——路由.rar
05-01
Vue后台管理——路由 涉及到路由的注册，路由的嵌套，动态路由匹配，编程式导航，对基础和组件加深理解。
基于vue.js路由参数的实例讲解——简单易懂
10-19
下面小编就为大家带来一篇基于vue.js路由参数的实例讲解——简单易懂。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue vuex vue-rouert后台项目——权限路由（适合初学）
11-30
项目地址： vue-simple-template 共三个角色：adan barbara carrie 密码全是：123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面（共三个页面）...vue-router ---- 页面路由 babel-polyfill ---- 将ES6
vue第四天笔记01——路由整理
08-21
使用之前记得npm install
Vue-路由(router)的全局配置
liu940129953的博客
03-17 1462
一、安装 NPM安装： npm install vue-router 二、创建路由模块 在src中创建router文件夹，文件名为index.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) // 1.创建路由对象 const router = new VueRouter({ // 2.添加路由配置，通过routes来添加路由配置 routes: [ .
vue学习-15vue全局路由守卫
好看的皮囊千篇一律，有趣的灵魂万里挑一。
10-10 328
在vue.js中，提供三种全局守卫，英文称作（Global Navigation Guards），这些守卫允许你在路由发生变化的时候执行的一些操作，例如身份验证，日志纪录或者路由跳转控制，全局路由守卫包含以下三种： **全局前置守卫** (beforeEach)：这个守卫在每次路由切换前触发，允许你在导航到新路由之前进行一些检查或操作。常用于身份验证。
全局路由守卫和局部路由守卫
q4717529的博客
07-02 1118
全局路由守卫和局部路由守卫 今日有童鞋问我全局的路由守卫怎默写 我直接细心地教了教他，现在我更新一下博客里面的全局路由守卫和单个的路由守卫希望对你们有所帮助！ 注（我的数据是保存到vuex里面的） 此处是全局的路由守卫需要写到router文件夹下面的index.js里面 // router.beforeEach((to, from, next) => { // if (store.state.token) { // next(); // } else { //
vue系列_vue-Router_组件内部的路由守卫（局部路由守卫）01
jiang7701037的博客
07-28 8795
如果你对vue的路由基础了解，就朝下看，不然不了解，请看vue系列_vue-Router入门和理解。 一、概念： 路由守卫：就是进入当前路由前，有个人“门卫”进行保护，也可以理解为“安检”。 在Vue组件里有个函数叫作：beforeRouteEnter。就是完成路由守卫的，表示进入当前路由前要做什么？ 1、如下示例代码（先理解beforeRouteEnter函数）： let good...
vue-router路由
唯见青山不见君
11-14 262
vue-router路由
Vue中的路由
热门推荐
weixin_64770583的博客
07-25 3万+
路由
vue3 路由的使用
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
vue2进阶篇：vue-router之“使用组件内路由守卫”
刘大猫
07-12 2588
vue2进阶篇：vue-router之“使用组件内路由守卫”
route与router当前与全局路由
u013594477的专栏
12-01 1080
vue-router中经常会操作的两个对象route和route和router两个。 1、$route对象 $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 1.$route.path** 字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。 2.$route.params** 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。 3.rout
vue-router应用——用户登录注册案例
05-24
接下来，在App.vue中，我们需要使用标签来显示路由组件： ``` <router-view></router-view> ``` 最后，在main.js中引入router.js，并将其挂载到Vue实例中： ``` import Vue from 'vue' import App from '....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sunnyboy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值