vue 路由

理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。前端路由：key是路径；value是组件component，用于展示页面内容。当浏览器的路径改变时, 对应的组件就会显示后端路由：key是路径；value是函数function，用于处理客户端提交的请求。服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数

weixin_58206976

71人浏览 · 2021-10-24 18:23:33

weixin_58206976 · 2021-10-24 18:23:33 发布

理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
前端路由：key是路径；value是组件component，用于展示页面内容。当浏览器的路径改变时, 对应的组件就会显示
后端路由：key是路径；value是函数function，用于处理客户端提交的请求。服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据
vue-router 的理解：vue 的一个插件库，专门用来实现 SPA 应用

1.基本使用

安装vue-router，命令：npm i vue-router

使用:

//src/router/idnex.js 中


// 1.引入Vue
import Vue from 'vue'
//2.引入VueRouter
import VueRouter from 'vue-router'
//3.应用插件
Vue.use(VueRouter)
//4.引入需要对应路径展示的组件
import About from '../components/About'
import Home from '../components/Home'
//5. 定义路由规则
const routes =[{
         name:'about', // 路由名称
		path:'/about', // 跳转路径
		component:About // 路径对应的组件
	},{
        name:'home',
		path:'/home',
		component:Home
	}]
//6.创建router实例对象，去管理一组一组的路由规则 并向外共享实例
export default new VueRouter({ 
	routes,
})


// main.js中
//引入路由器
import router from './router'
//  在Vue实例上挂载路由
new Vue({
    router, // 挂载路由
    render: (h) => h(App),
}).$mount('#app');
复制代码

指定组件展示位置

<router-view></router-view>
复制代码

2.多级路由（嵌套路由）

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

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

跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>
复制代码

3. 路由导航

3.1声明式导航 - 基础使用

vue-router提供了一个全局组件 router-link
router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#) 属性值填上要跳转的路径字符
router-link提供了声明式导航高亮的功能(自带类名is-active)

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/about">about组件</router-link>
      <router-link to="/home">home组件</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* 省略了 其他样式 */
.footer_wrap .router-link-active{
  color: white;
  background: black;
}
</style>
复制代码

总结: 链接导航, 用router-link配合to, 实现点击切换路由

3.2 路由编程式导航

作用：不借助<router-link> 实现路由跳转，配合js的编程式导航跳转 (利用$route.push())

具体编码：

<template>
  <div>
      <span @click="btn1">发现音乐</span>  
      <span @click="btn2">我的音乐</span>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    btn1(){
      // 方式1: path跳转 当有多个路由层级时 需要写上每一层的路由路径
      this.$router.push('/home')
    },
     btn2(){
      // 方式2: name直接跳转
      this.$router.push('about')
    }
  }
};
</script>



//$router中的其他几个API
this.$router.forward() //前进  请求(返回)上一个记录路由
this.$router.back() //后退
this.$router.go() //可前进也可后退 go中要传一个参数，n/-n表示向前/后跳转n个页面
//this.$router.go(-1): 请求(返回)上一个记录路由
//this.$router.go(1): 请求下一个记录路由
复制代码

几个注意点:

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

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

3.整个应用只有一个router，可以通过组件的$router属性获取到（每个组件都有$router属性，不过是同一个）。

4路由跳转传参

4.1.路由的query参数

传递参数(加个'?x=xxx&y=yyy')

<!-- 声明式导航跳转传参:-->
<!-- 跳转并携带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>

<!-- 编程式导航跳转传参-->
<script>
export default {
  methods: {
    btn1(){
      // 方式1: path和query跳转
      this.$router.push({
		path:'/about',
		query:{
			id:666,
                      title:'你好'
		} 
      })
    },
     // 方式2:name和query
      btn2(){
           this.$router.push({
		name:'about',
		query:{
			 id:666,
                      title:'你好'
		} 
      })
      }
  }   
};
</script>

复制代码

接收参数：(跳转的组件中)

$route.query.id
$route.query.title
复制代码

<li>消息编号：{{$route.query.id}}</li>
<li>消息标题：{{$route.query.title}}</li>
复制代码

5.路由的params参数

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

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

传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
                    title:'你好'
		}
	}"
>跳转</router-link>
<!-- 编程式导航跳转传参-->
<script>
export default {
  methods: {
    btn1(){
      // 方法: name和params跳转
      this.$router.push({
		name:'about',
		params:{
			 id:666,
                          title:'你好'
		} 
      })
    },
    
  }   
};
</script>
复制代码

特别注意：路由携带params参数时，则不能使用path配置项，必须使用name配置！

接收参数：

$route.params.id
$route.params.title
复制代码

6.路由的props配置

官网上的一段话---->
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。使用 props 将组件和路由解耦 , 意思就是最好不要在组件中像这样使用传入的值:$route.params.id.....

{
	name:'about',
	path:'/about',
	component:About,

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

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件 (这种方式只会管理params参数 query参数无效)
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props($route){ // 接收到的参数就是$route  参数写成{query}解构形式也可以
		return {
			id:$route.query.id,
			title:$route.query.title
		}
	}
}
// props配置完后在组件内用props接收传入的值 
// About组件中:
<script>
export default {
  props:['id','title'] 
}
<script>
复制代码

配置好props后在组件中直接使用props:['id','title'] 接收的值 ----> {{id}},{{title}}就好了

7.缓存路由组件

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

具体编码：

<!-- 缓存一个路由组件 -->
<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

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

用<keep-alive>包裹要保持挂载的路由组件的展示区<router-view>，include里写的是组件名，表示要让哪个组件保持挂载，不写include就表示该展示区的所有路由组件都保持挂载，在切换路由组件时不被销毁

8.两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
具体名字：
1. activated路由组件被激活时触发。(比如从别的路由组件切换到当前路由组件)
2. deactivated路由组件失活时触发。(比如从当前路由组件切走)

10.路由器的两种工作模式(mode配置项)

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^