vue-基本路由 - 嵌套路由 - 编程式路由导航

于 2022-12-23 21:17:52 发布
阅读量454 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_58813731/article/details/128420705
版权
本文详细介绍了Vue Router的使用，包括基本路由配置、多级路由设置、传递query和params参数、命名路由、路由的props配置、`<router-link>`的replace属性、编程式路由导航、缓存路由组件、路由组件的生命周期钩子以及全局和组件级别的路由守卫。同时，对比了hash模式和history模式，提供了实际的代码示例和应用场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue路由

路由

  1. 理解
    1. 说明
      官方提供的用来实现SPA 的vue 插件
      github: https://github.com/vuejs/vue-router
      中文文档: http://router.vuejs.org/zh-cn/
      下载: npm install vue-router --save
  2. 相关API 说明
    1. VueRouter(): 用于创建路由器的构建函数
new VueRouter({
// 多个配置项
})
  1. 路由配置
routes: [
	{ // 一般路由
		path: '/about',
		component: About
	},
	{ // 自动跳转路由
		path: '/',
		redirect: '/about'
	}
]
  1. 注册路由器
    main.js
import router from './router'
new Vue({
router
})
  1. 使用路由组件标签
  2. <router-link>: 用来生成路由链接
<router-link to="/xxx">Go to XXX</router-link>
  1. <router-view>: 用来显示当前路由组件界面
<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>Router Test</h2></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--生成路由链接-->
          <router-link to="/about" class="list-group-item">About</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--显示当前组件-->
            <keep-alive>
              <router-view msg="abc"></router-view>
            </keep-alive>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

路由器模块: src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

import About from '../pages/About'
import Home from '../pages/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/about',
      component: About //组件名
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/',
      component: About
    }
  ]
})

注册路由器: main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({ // 配置对象的属性名都是一些确定的名称，不能随便修改
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

路由转换实现样式变化：（active-class）

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

总结: 编写使用路由的3 步

  1. 定义路由组件
routes: [
	{ // 一般路由
		path: '/about',
		component: About
	},
	{ // 自动跳转路由
		path: '/',
		redirect: '/about'
	}
]
  1. 注册路由
import router from './router'
new Vue({
router
})
  1. 使用路由
<router-link to="/xxx">Go to XXX</router-link>

多级路由

注意一个问题 router-link 标签to=‘path’ path要写全
（to=“/home/news”）

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

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

传递query参数

注意：对象写法可用path和name

<!-- 跳转路由并携带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>

调用参数
（this.$route.query.id）

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

命名路由

解决路径长问题

<!-- 跳转路由并携带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="{
		name:'xiangqing',
		query:{
			id:m.id,
			title:m.title
			}
		}">
		{{m.title}}
</router-link>

router/index.vue

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

params参数传递

注意：params传参对象形式不能写path属性，只能写name属性
需要在routes配置路由的path加“：xx”
列子：

path:'detail/:id/:title',

router/index.js

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',
							component:Detail,
						}
					]
				}
			]
		}
	]

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',
					params:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				</router-link>
			
			</li>
		</ul>
		<hr>
		<router-view></router-view>
	</div>
</template>

调用params参数
（this.$route.params.id）

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

路由的props配置

（有三种写法）
第一种：

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

第二种：
(这种方法只能收到params参数)

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

第三种


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

router/index.js

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

						}
					]
				}
			]
		}
	]

Mssage.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>
			
			</li>
		</ul>
		<hr>
		<router-view></router-view>
	</div>
</template>

子组件Deatil.vue

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

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

router-link的replace属性

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>

编程式路由

常用API：
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由
案列：

<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
					}
				})
			}
		},
	}
</script>

缓存路由组件

<keep-alive></keep-alive>

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

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

两个新生的生命周期钩子

activated() {} deactivated() {}

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

全局路由守卫（前置路由守卫、后置路由守卫）

前置路由守卫

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
	console.log('前置路由守卫',to,from)
	if(to.meta.isAuth){ //判断是否需要鉴权
		if(localStorage.getItem('school')==='atguigu'){
			next()
		}else{
			alert('学校名不对，无权限查看！')
		}
	}else{
		next()
	}
})

后置路由守卫

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '硅谷系统'
})

独享路由守卫

（就是在路由配置上写守卫）

routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About,
			meta:{title:'关于'}
		},
		{
			name:'zhuye',
			path:'/home',
			component:Home,
			meta:{title:'主页'},
			children:[
				{
					name:'xinwen',
					path:'news',
					component:News,
					meta:{isAuth:true,title:'新闻'},
					beforeEnter: (to, from, next) => {
						console.log('独享路由守卫',to,from)
						if(to.meta.isAuth){ //判断是否需要鉴权
							if(localStorage.getItem('school')==='atguigu'){
								next()
							}else{
								alert('学校名不对，无权限查看！')
							}
						}else{
							next()
						}
					}
				},
				{
					name:'xiaoxi',
					path:'message',
					component:Message,
					meta:{isAuth:true,title:'消息'},
					children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,
							meta:{isAuth:true,title:'详情'},

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

						}
					]
				}
			]
		}
	]

组件内路由守卫

（在组件内写守卫）

		//通过路由规则，进入该组件时被调用
		beforeRouteEnter (to, from, next) {
			console.log('About--beforeRouteEnter',to,from)
			if(to.meta.isAuth){ //判断是否需要鉴权
				if(localStorage.getItem('school')==='atguigu'){
					next()
				}else{
					alert('学校名不对，无权限查看！')
				}
			}else{
				next()
			}
		},

		//通过路由规则，离开该组件时被调用
		beforeRouteLeave (to, from, next) {
			console.log('About--beforeRouteLeave',to,from)
			next()
		}

history模式和hash模式

（在路由配置写上{mode:'history',}）默认hash模式

new VueRouter({
	mode:'history',
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About,
			meta:{isAuth:true,title:'关于'}
		},
		{
			name:'zhuye',
			path:'/home',
			component:Home,
			meta:{title:'主页'},
			children:[
				{
					name:'xinwen',
					path:'news',
					component:News,
					meta:{isAuth:true,title:'新闻'},
					/* beforeEnter: (to, from, next) => {
						console.log('前置路由守卫',to,from)
						if(to.meta.isAuth){ //判断是否需要鉴权
							if(localStorage.getItem('school')==='atguigu'){
								next()
							}else{
								alert('学校名不对，无权限查看！')
							}
						}else{
							next()
						}
					} */
				},
				{
					name:'xiaoxi',
					path:'message',
					component:Message,
					meta:{isAuth:true,title:'消息'},
					children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,
							meta:{isAuth:true,title:'详情'},

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

						}
					]
				}
			]
		}
	]
})

总结

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

  1. 基本使用
    安装vue-router，命令：npm 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
  1. 实现切换（active-class可配置高亮样式）
<router-link active-class="active" to="/about">About</router-link>
  1. 指定展示位置
<router-view></router-view>

几个注意点：

  1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
  2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
  3. 每个组件都有自己的 $route属性，里面存储着自己的路由信息。
  4. 整个应用只有一个router，可以通过组件的$router属性获取到。

多级路由（多级路由）

配置路由规则，使用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>

路由的query参数

  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>
  1. 接收参数
$route.query.id
$route.query.title

命名路由

  1. 作用：可以简化路由的跳转。
  2. 如何使用
    1. 给路由命名：
{
      	path:'/demo',
      	component:Demo,
      	children:[
      		{
      			path:'test',
      			component:Test,
      			children:[
      				{
                        name:'hello' //给路由命名
      					path:'welcome',
      					component:Hello,
      				}
      			]
      		}
      	]
      }

简化跳转：

<!--简化前，需要写完整的路径 -->
      <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参数

  1. 配置路由，声明接收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>

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

接收参数：

$route.params.id
$route.params.title

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

<router-link>的replace属性

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

编程式路由导航

作用：不借助实现路由跳转，让路由跳转更加灵活

具体编码：

//$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() //可前进也可后退

缓存路由组件

  1. 作用：让不展示的路由组件保持挂载，不被销毁。
  2. 具体编码：
<keep-alive include="News"> 
       <router-view></router-view>
   </keep-alive>

两个新的生命周期钩子

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

路由守卫

作用：对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫

全局守卫:

//全局前置守卫：初始化时执行、每次路由切换前执行
   router.beforeEach((to,from,next)=>{
   	console.log('beforeEach',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
   			next() //放行
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next() //放行
   	}
   })
   
   //全局后置守卫：初始化时执行、每次路由切换后执行
   router.afterEach((to,from)=>{
   	console.log('afterEach',to,from)
   	if(to.meta.title){ 
   		document.title = to.meta.title //修改网页的title
   	}else{
   		document.title = 'vue_test'
   	}
   })

独享守卫:

beforeEnter(to,from,next){
   	console.log('beforeEnter',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('school') === 'atguigu'){
   			next()
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next()
   	}
   }

组件内守卫：

//进入守卫：通过路由规则，进入该组件时被调用
   beforeRouteEnter (to, from, next) {
   },
   //离开守卫：通过路由规则，离开该组件时被调用
   beforeRouteLeave (to, from, next) {
   }

路由器的两种工作模式

对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

hash模式:

地址中永远带着#号，不美观 。
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
兼容性较好。

history模式：

地址干净，美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

Vue路由器：嵌套路由
百锦再的博客
01-01 1万+
嵌套路由指的是在 Vue Router 配置中，父路由包含子路由，从而在父组件中动态渲染子组件的路由模式。简单来说，就是通过 Vue Router 配置多个层级的路由，每个路由不仅仅指向一个页面组件，而是能够包含其他的子路由，通过子路由来决定渲染哪个具体的组件。父组件可以在指定的插槽位置渲染子组件，从而实现嵌套效果。Vue Router 提供了强大且灵活的路由配置功能，能够满足各种复杂的需求。通过合理使用嵌套路由嵌套命名路由和忽略父组件的特性，开发者可以轻松应对多级路由、动态内容渲染和路由跳转等场景。
vue3:四、嵌套路由的实现
最新发布
weixin_46001736的博客
03-01 1151
vue3:四、嵌套路由的实现
编程式路由导航
欢迎留言~
08-24 173
借助this.prosp.history对象上的API对操作路由跳转、前进、后退 -this.prosp.history.push() -this.prosp.history.replace() -this.prosp.history.goBack() -this.prosp.h...
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
解决vue-router 嵌套路由没反应的问题
10-14
原因在于，Vue Router中的嵌套路由需要父路由有一个对应的组件，该组件中包含一个`<router-view>`标签，用于渲染子路由对应的组件。在原始的配置中，`/course`路由没有指定组件，因此Vue Router无法找到放置子路由...
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...
基于vue-router 多级路由redirect 重定向的问题
10-18
此外，由于嵌套路由的特性，有时重定向会在不正确的层级进行，从而导致页面重定向到了错误的路由。 **知识点四：解决重定向问题的方法** 针对文章中提到的在点击底部导航项时，三级页面未能正确加载的问题，解决...
vue嵌套路由
qq_44231797的博客
10-26 3485
文章目录一、为什么要使用嵌套路由？二、步骤演示：1.在views目录下新建user目录，编写User.vue和Profile.vue2.配置路由信息 router/index.js3.编写Main.vue4.编写main.js，导入路由信息三、碰到的问题四、解决方案方案一方案二 一、为什么要使用嵌套路由？ 就比如在一个页面中， 在页面的上半部分，有三个按钮，而下半部分是根据点击不同的按钮来显示不同的内容，那么我们就可以在这个组件中的下半部分看成是一个嵌套路由，也就是说在这个组件的下面需要再来一个 <
vue 嵌套路由
weixin_46146313的博客
05-12 330
嵌套路由 一些比较复杂的应用会有多层嵌套的路由和组件组成 在应用增加一个用户个人中心，用户中心又是由多个页面组成时，使用嵌套路由 const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../vi
Vue嵌套路由
Mr.Zhang 努力奔跑!
03-12 148
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../vue/dist/vue.js"></...
Vue 嵌套路由
ChaoChao66666的博客
03-18 326
在上一篇（Vue3 Router（路由）的基本使用_Zhichao_97的博客-优快云博客）的基础上，希望实现嵌套路由，如下： 1.将vue3Router01>src>index.js改为如下所示： import {createRouter,createWebHashHistory} from 'vue-router' import News from '../components/News.vue' import User from "../components/...
vue的路由嵌套
坤音女孩的博客
11-05 210
1.需要在 Router 的参数中使用 children 配置： PS：登录成功后跳转到action组件，action组件包括多个子组件，渲染左边的导航栏（fixed）和默认渲染index的内容。相当于只有登录和action两个页面 2.登录成功后的效果图如下 3.路由跳转都是在action/后面 ...
Vue路由嵌套
shizhenweiszw的博客
03-01 652
使用children属性实现路由嵌套 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="./lib/vue-2.4.0.j
vue嵌套子路由
小菜鸟的博客
12-06 391
vue嵌套子路由 今天自己的项目需要使用嵌套子路由，里面出现了几个bug下面记录一下 首先简单讲解下嵌套子路由的使用 我们在需要使用子路由的页面使用router-view,keep-alive的使用方式好像有所改变，自己去查看官网 路由页面index.js 组件跳转子路由 vue.config.js 下面简单说下我遇到的bug 1.你要修改历史路由路径，重新创建个文件vue.config.js，不然你在地址栏输入路径的时候会报错 2.就是你在使用router-link的时候一定要注意 这里一定要注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值