Vue一级路由与二级路由/路由重定向

最新推荐文章于 2024-05-10 16:06:07 发布
最新推荐文章于 2024-05-10 16:06:07 发布
阅读量5.2k 收藏 4
点赞数
分类专栏： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chijiajing/article/details/82889720
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 记得先导包 -->
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
	<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
	<!-- Vue的作用域 -->
	<div id="box">
		<ul>
			<li>
				<router-link to="/home">首页</router-link>
			</li>
			<li>
				<router-link to="/news">新闻</router-link>
			</li>
			<li>
				<router-link to="/hot">热点</router-link>
			</li>
		</ul>
		<router-view></router-view>
	</div>

	<!-- 自定义组件模板 -->
	<!-- 首页 -->
	<template id="home">
		<div>
			<h3>首页</h3>
		</div>
	</template>
	
	<!-- 新闻,定义二级路由 -->
	<template id="news">
		<div>
			<h3>新闻</h3>
			<!-- 二级路由的路径必须有一级路由原路径再+自身的路径 -->
			<router-link to="/news/file">新闻文件</router-link>
			<router-link to="/news/msg">新闻说明</router-link>
			<!-- 二级路由显示的地方 -->
			<router-view></router-view>
		</div>
	</template>
	
	<!-- 热点 -->
	<template id="hot">
		<div>
			<h3>热点</h3>
		</div>
	</template>
	<script>
		//绑定组件模板
		var Home=Vue.extend({template:"#home"});
		var News=Vue.extend({template:"#news"});
		var Hot=Vue.extend({template:"#hot"});
		/*把组件模板和地址对应起来*/
		var routes=[
		{
			path:"/home",
			component:Home
		}, //home
		{
			path:'/news',
			component:News,
			//配置二级路由(层层嵌套)
			children:[
			//第一个二级路由file页面(注意：二级路由的path不能有"/")
			 {path:"file",
			 component:{
			 	template:"<div>新闻文件详情页哦</div>"
			 }
			},
			//二级路由第二个地址(注意：二级路由的path不能有"/")
			{
				path:"msg",
				component:{
					template:"<div>新闻说明页二级路由哦</div>"
				}
			}
			]
		}, //news
		{
			path:'/hot',
			component:Hot
		}
		];
		var router=new VueRouter({
			routes:routes
		});
		var vm=new Vue({
			el:"#box",
			router:router
		});
	</script>
</body>
</html>

this.$router.push('/home');

chijiajing
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一级路由和二级路由
qq_41716608的博客
03-07 1512
1.下载vue-router npm install --save vue-router 2.先引入vue，再引入vue-router 3.示例代码如下： 一级路由： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
2021-11-08 vue笔记-路由vue-router(二) 路由的重定向和二级路由(路由嵌套或子路由)
GAARA
11-08 243
文章目录 重定向:路径错误时回到指定的路径 使用: 二级路由 定义 示例一:Film路由下添加二级路由nowPlaying和comingSoon 1.views下新建文件夹FIlm,创建两个子路由文件 2.Film.vue中添加路由容器router-view 3.router/index.js的Film的路由路径下添加children数组 结果 示例二:为子路由重定向 目的 router.index.js
前段框架——Vue的一级路由和二级路由
weixin_30599769的博客
11-09 1444
在上篇已经讲述了脚手架的安装，这篇就深入的理解的脚手架给我带来的方便吧！ 首先我们看一下vue组件的结构，看这张图，会发现vue文件中无非就是html，js和css的结合。 我们再来了解一下脚手架中文件的用途： 在里面我已经加上了注释： 终于要进入正题了！！！！ 脚手架的一级路由和二级路由的使用： 1.一级路由： (1).在compo...
Vue路由重定向
最新发布
m0_74462339的博客
05-10 358
网页打开，url默认是/路径，未匹配到组件时，会出现空白。
vue-路由重定向和二级路由
qq_46606159的博客
03-26 342
重定向： { path:"*", redirect:"/home" } 二级路由（嵌套）： { path: '/File', component: File, children: [ { path: '/File/nowplaying', component: Nowplaying }, ...
vue路由杂谈，路由安装，路由跳转，路由传参，二级路由
芯蕊的阳光
06-27 306
路由安装使用 项目中‘router’文件夹下index.js文件 import Vue from 'vue' import Router from 'vue-router' import Home from '../components/Home' import About from '../components/About' Vue.use(Router) const router = new Router({ routes: [ { path: '/About',
vue二级路由设置方法
08-28
Vue 二级路由设置方法是 Vue.js 框架中的一种常见的路由配置方法，它允许开发者在项目中实现多级路由的配置。在本文中，我们将详细介绍 Vue 二级路由设置方法的实现步骤和相关知识点。 一、 Vue 路由配置的基本概念...
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue嵌套路由与404重定向实现方法分析
10-18
主要介绍了vue嵌套路由与404重定向实现方法,结合实例形式分析了vue.js嵌套路由与404重定向的概念、原理、实现步骤与相关操作技巧,需要的朋友可以参考下
Vue的路由动态重定向和导航守卫实例
11-29
根据vue官方文档，对于重定向有详细的示例，但是关于...重定向的目标也可以是一个命名的路由： const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] }) 甚至是一个方法，动态
vue项目的一级路由和二级路由的理解
Self_discipline8的博客
06-24 1369
vue项目的一级路由和二级路由的理解
vue三级路由
06-25
vue如何使用二级路由和三级路由,以及路由的引用,路由的抽离
vue-router 父路由重定向到子路由加载问题
秋楓的博客
06-15 4221
最近在学习vue后找了一个vue-admin-template框架进行搭建和改造，发现一个地方，困恼了很久。
Vue的路由动态重定向和导航守卫
riddle1981的博客
01-10 1万+
根据vue官方文档，对于重定向有详细的示例，但是关于使用方法动态重定向的描述却不多，重定向部分的描述如下： 重定向 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b： const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 重定向的目标也可以是一个命
vue导航菜单，一级路由，二级路由
LuckyMon的博客
02-27 8508
route 直接引入 import HelloWorld from '@/components/HelloWorld' {path: 'HelloWorld', name: 'HelloWorld', component:HelloWorld} 优势在于简洁明了，适用于少量的路由，但是大量路由时，比较占用资源 懒加载 {path: 'HelloWorld', name: 'HelloWorld'...
vue-router 父路由为跟路由定位到某个子路由
weixin_41877243的博客
12-24 1379
第一种方法：重定向。 { path: '/', name: 'home', redirect:'home', component: () => import(/* webpackChunkName: "index" */ '../views/layout.vue'), children:[ { path: 'home', name: 'home', meta:{
主页布局+通过接口获取菜单数据+实现首页的路由重定向+设置左侧二级菜单的路由链接
我的博客
08-21 896
目录 1.通过接口获取数据 API如果需要授权，必须在请求头中使用Authorization字段提供token令牌 通过axios请求拦截器添加token，保证拥有获取数据的权限 main.js import Vue from 'vue' import App from './App.vue' import router from './router' import './plugins/element.js' // 导入全局样式 import './assets/css/global.css'
Vue-router使用路由重定向解决子路径匹配问题
ZTao-z的博客
10-12 2287
问题 最近做项目需要将一个系统A部署到另一个系统B的子路径C下 但遇到一个问题：刷新的时候，系统A获取到的访问路径包含了系统B的子路径（从**/A变成了/C/A**），导致路由匹配失败 解决方法：通过router的通配符获取正确的路径，进行页面重定向 代码示例 const router = new VueRouter({ routes: [ { path: '/prefix_pa...
vue-router 多级路由redirect 重定向的问题
热门推荐
versionli的博客
06-27 8万+
在做多级路由的时候遇到很多问题，虽然不难，但是如果没有经验，往往要花一整天时间才能解决（可能我笨），况且网上资料也很少。项目需要是这样的： 登录页面跳到后台页面重定向，登录页是一级路由对应页面登录后：同时重定向二级和三级页面，这样登录就会重定向了，此时url但又有一个问题：当再次点击底部“堂食”的时候，url变成这样，并且三级页面没有出来解决办法是：在这个“堂食”按键 添加一个方法记住，也只...
vue二级路由重定向
09-04
例如，如果需要将二级路由重定向到"/home"，则可以设置redirect属性为"/home"。 2. 在父级路由组件的模板中，使用<router-view></router-view>标签来显示二级路由的内容。这个标签会根据当前路由的路径自动匹配对应...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值