Vue Router

最新推荐文章于 2023-06-11 16:15:57 发布
最新推荐文章于 2023-06-11 16:15:57 发布
阅读量104 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wmklalala/article/details/104120350
版权

使用路由：

1.引包

2.创建实例化VueRouter对象

3.匹配路由规则

4.挂载new Vue()实例化对象

 

1.基本使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
	<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.min.js"></script>
	<script type="text/javascript">
		
		var Login = {  
			data(){
				return{

				}
			},
			template:`
				<div>
					我是登录页面
				</div>
			`
		};

		var Register = {  
			data(){
				return{

				}
			},
			template:`
				<div>
					我是注册页面
				</div>
			`
		};

		var router = new VueRouter({
			routes:[
				{
					path:"/login",
					component:Login
				},
				{
					path:"/register",
					name:'register', //命名路由
					component:Register

				},
			]
		});
		//引入vue-rouuter模块，会抛出两个全局组件
		//1.router-link ==> a to==>href
		//2.router-view==>路由匹配组件出口

		var App = {
			template:`
				<div>
					<!--
					<a herf="">登录页面</a>
					<a herf="">注册页面</a>
					-->
					<router-link to="/login">登录页面</router-link>
					<router-link :to="{name:'register'}">注册页面</router-link>
					<router-view></router-view>
				</div>
			`
		};

		var vm = new Vue({
			el:'#app',
			data(){
				return{

				}
			},
			//挂载子组件
			components:{
				App
			},
			router,
			//父组件可以直接使用
			template:`
				<App></App>
			`
		});
	</script>
	
</body>
</html>

2.路由参数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
	<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.min.js"></script>
	<script type="text/javascript">
		
		var UserParams = {  
			data(){
				return{

				}
			},
			template:`
				<div>
					我是用户1
				</div>
			`
			,
			created(){
				//抛出两个对象，挂载到Vue实例化对象
				console.log(this.$router);
				console.log(this.$route);
				console.log(this.$route.params.id);
			}
		};

		var UserQuery = {  
			data(){
				return{

				}
			},
			template:`
				<div>
					我是用户2
				</div>
			`
		};

		var router = new VueRouter({
			routes:[
				{
					//动态路由 params
					path:"/user/:id",
					name:'userP',
					component:UserParams
				},
				{
					path:"/user",
					name:'userQ', 
					component:UserQuery

				},
			]
		});
		//引入vue-rouuter模块，会抛出两个全局组件
		//1.router-link ==> a to==>href
		//2.router-view==>路由匹配组件出口

		var App = {
			template:`
				<div>
					<router-link :to="{name:'userP',params:{id:1}}">用户1</router-link>
					<router-link :to="{name:'userQ',query:{userId:2}}">用户2</router-link>
					<router-view></router-view>
				</div>
			`
		};

		var vm = new Vue({
			el:'#app',
			data(){
				return{

				}
			},
			//挂载子组件
			components:{
				App
			},
			router,
			//父组件可以直接使用
			template:`
				<App></App>
			`
		});
	</script>
	
</body>
</html>

3.嵌套路由

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
	<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.min.js"></script>
	<script type="text/javascript">
		
		var Home = {  
			template:`
				<div>
					首页内容
					<br/>
					<router-link to='/home/song'>歌曲</router-link>
					<router-link to='/home/movie'>电影</router-link>
					<router-view></router-view>
				</div>
			`
		};

		var Song = {
			template:`
				<div>歌曲内容</div>
			`
		};

		var Movie = {
			template:`
				<div>电影内容</div>
			`
		};

		var router = new VueRouter({
			routes:[
				{
					path:"/home",
					name:'home',
					component:Home,
					children:[
						{
							path:"song",  //无需加斜杠。因为上一个home后面会自动加斜杠
							component:Song,
						},
						{
							path:"movie",
							component:Movie,
						},
					]
				},
			]
		});
		//引入vue-rouuter模块，会抛出两个全局组件
		//1.router-link ==> a to==>href
		//2.router-view==>路由匹配组件出口

		var App = {
			template:`
				<div>
					<router-link :to="{name:'home'}">首页</router-link>
					<router-view></router-view>
				</div>
			`
		};

		var vm = new Vue({
			el:'#app',
			data(){
				return{

				}
			},
			//挂载子组件
			components:{
				App
			},
			router,
			//父组件可以直接使用
			template:`
				<App></App>
			`
		});
	</script>
	
</body>
</html>

wmklalala
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue路由rouuter-view标签
qq_40277163的博客
06-29 263
刚开始学习Vue路由时，老是不知道标签放哪里，很难受，慢慢使用很久后，才弄明白，记住一句话：将此钉子（）埋于他路径的上一级模板内即可 { path: "/one", name: "one", component: one, children: [ { path: "two", component: two, children:[ { path:"three", component:three
Vue router原理
日积月累的博客
03-28 4552
总结： vue-router是vue项目的重要组成部分，用于构建单页应用。单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。路由的本质就是建立url和页面之间的映射关系 router 模式 hash / history hash模式是vue-router的默认模式。hash指的是url锚点，当锚点发生变化的时候，浏览器只会修改访问历史记录，不会访问服务器重新获取页面。因此可以监听描点值的变化，根据描点值渲染指定dom。 hash监听方法： window.addEventListene
一文详解:Vue3中使用Vue Router
热门推荐
九仞山的专栏
06-11 3万+
详细介绍了Vue3中使用Vue Router，从Vue Router的安装，基础知识到路由嵌套、路由守卫及路由懒加载等内容详细探讨了Vue Router的使用方法
22_VueRouter路由使用.pdf
10-07
VueRouter路由使用.pdf VueRouter是Vue.js的官方路由，它与Vue.js核心深度集成，让用Vue.js构建单页应用变得非常容易。Vue Router是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来。在VueRouter的...
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
08-28
vue router 嵌套路由在 history 模式下刷新无法渲染页面问题的解决方法 一、问题描述 ---------------- 在使用 vue router 嵌套路由时，我们可能会遇到一个问题，即在 history 模式下刷新页面时，嵌套路由页面无法...
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 是现代前端开发中一套流行的组合，用于构建高效、可维护的后台管理系统。这套模板利用了最新版本的技术栈，旨在提高开发效率并提供良好的用户体验。 首先，Vue3...
vue router 传参获取不到的解决方式
10-15
今天小编就为大家分享一篇vue router 传参获取不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue router demo详解
08-29
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] }) ``` 3. 定义路由组件：开发者需要定义路由组件，例如： ``` const Foo = { template: '...
vue+element UI改进轮播图自适应浏览器窗口大小
wmklalala的博客
04-03 2263
element UI自带的el-carousel高度是固定的，当图片高度过小或者浏览器窗口大小变化时，会出现空隙。我参考的方法来自https://blog.csdn.net/juneoer/article/details/84205231?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc...
vue filters中时间戳转年月日并补零
wmklalala的博客
11-12 826
filters: { timeFormat(timestamp){ var time = new Date(timestamp * 1000); var y = time.getFullYear(); //getFullYear方法以四位数字返回年份 var m = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一 var d = time.getD.
Vue + axios + elementUI实现简单的登录+权限控制（不使用VueX）
wmklalala的博客
08-18 823
实现目标 游客可以浏览网站，登录后的用户可以对网页内容进行编辑与管理。 游客看见的菜单栏： 登录后的菜单栏： 具体思路 1.管理页面需要登录才能进入，在router.js中添加meta 2.前端发送用户名和密码给后端，登录成功后后端返回一个token，保存在localStorage中，并设置isLogin为true。登录成功后跳转到主页。 //Login.vue login(){ this.$refs.loginForm.validate((val.
命令行安装Vue Devtools报错 Error: Cannot find module '@vue-devtools/build-tools'解决办法
wmklalala的博客
04-07 801
我的安装步骤是参考https://www.jianshu.com/p/63f09651724c的，但在npm run build的时候报错了。搜索了一下网上很多人都碰到了类似的问题，大多数是转而下载编译好的文件了，但我就很纳闷为啥别人装得好好的我就不行，一核对发现我跟人家的文件就不一样，没有shells文件夹。 问题出在，从GitHub克隆代码到本地的时候，克隆了所有的分支。我本地文件夹里显示的...
Vue学习记录
wmklalala的博客
08-12 155
8.12 vue.common.js 使Vue支持common vue.esm.browser.js 使Vue支持ES6 runtime 运行时文件 插值表达式{{}} 指令系统v-xxx v-if有更高的切换开销，v-show有更高的初试渲染开销 当DOM节点的属性发生改变时，会对template中的DOM都重新渲染 sublime新建HTML 文件名保存为英文名.html，然后...
vue生命周期
wmklalala的博客
03-11 87
生命周期函数 = 生命周期事件 = 生命周期钩子 组件创建期间的4个钩子函数： beforeCreate 执行时，data和methods中的数据都还没有初始化 created中，data和methods中的数据都已经初始化 vue开始编辑模板，执行vue代码中的指令，在内存中生成编译好的最终模板字符串，然后将该字符串在渲染为内存中的DOM。注意：此时只是在内存中渲染好了模板，并没有...
Vue组件的创建与通信
wmklalala的博客
03-17 83
1.Vue组件创建的几种方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <!--...
南昌航空大学考研17个学院，59个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
07-15
南昌航空大学考研17个学院，59个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
齐齐哈尔医学院考研，57个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
最新发布
07-15
齐齐哈尔医学院考研，57个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
vue router
08-24
import VueRouter from 'vue-router' Vue.use(VueRouter) // 定义路由表 const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] // 创建router实例 const router = ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值