11.初步使用vue-router

最新推荐文章于 2021-10-29 13:53:39 发布
最新推荐文章于 2021-10-29 13:53:39 发布
阅读量178 收藏
点赞数
分类专栏： vue简介 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47870554/article/details/107291113
版权

vue-router：

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

https://router.vuejs.org/zh/guide/

起步：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>start</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<button v-on:click='showRouter'>$router 访问路由器</button>
		<button v-on:click='showRoute'>$route 访问当前路由</button>
		<div>
			<!-- 使用 router-link 组件来导航. -->
			<!-- 通过传入 `to` 属性指定链接. -->
			<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
			<router-link to="/foo">Go to Foo</router-link>
			<router-link to="/bar">Go to Bar</router-link>
		</div>
		<!-- 路由出口 -->
		<!-- 路由匹配到的组件将渲染在这里 -->
		<router-view>
			
		</router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

		// 1. 定义 (路由) 组件。
		// 可以从其他文件 import 进来
		const Foo = { template: '<div>foo</div>' }
		const Bar = { template: '<div>bar</div>' }

		// 2. 定义路由
		// 每个路由应该映射一个组件。 其中"component" 可以是
		// 通过 Vue.extend() 创建的组件构造器，
		// 或者，只是一个组件配置对象。
		// 我们晚点再讨论嵌套路由。
		const routes = [
			{ path: '/foo', component: Foo },
			{ path: '/bar', component: Bar }
		]

		// 3. 创建 router 实例，然后传 `routes` 配置
		// 你还可以传别的配置参数, 不过先这么简单着吧。
		const router = new VueRouter({
			routes // (缩写) 相当于 routes: routes
		})

		// 4. 创建和挂载根实例。
		// 记得要通过 router 配置参数注入路由，
		// 从而让整个应用都有路由功能
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'hello router'
				}
			},
			methods: {
				showRouter(){
					console.log('函数 showRouter')
					console.log(this.$router);
				},
				showRoute(){
					console.log('函数 showRoute')
					console.log(this.$route);
				}
			}
		}).$mount('#app');

		// 现在，应用已经启动了！
	</script>
</body>
</html>

动态路由匹配：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.dynamic-router</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<div>
			<router-link to="/user/foo">Go to Foo</router-link>
			<router-link to="/user/bar">Go to Bar</router-link>
		</div>
		<router-view>
			
		</router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;

		const router = new VueRouter({
				routes: [
						// 动态路径参数 以冒号开头
						{
							path: '/user/:id',
							component: {
								template: '<div>User - id: {{ $route.params.id }}</div>',
							}
						}
				],
		});

		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'hello dynamic-router'
				}
			},
			methods: {
				showRouter(){
					console.log('函数 showRouter')
					console.log(this.$router);
				},
				showRoute(){
					console.log('函数 showRoute')
					console.log(this.$route);
				}
			}
		}).$mount('#app');
	</script>
</body>
</html>

嵌套路由：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2.nested-router.html</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<div>
			<router-link to="/user/door">Go to door</router-link>
		</div>
		<router-view></router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		const User = {
			template: `
			<div class="user">
				<h2>User {{ $route.params.id }}</h2>
				<router-link to="/user/door/profile">profile</router-link>
				<router-link to="/user/door/posts">posts</router-link>
				<router-view></router-view>
			</div>
			`
		}
		const router = new VueRouter({
			routes: [
				{
					path: '/user/:id', component: User,
					children: [
						{
							// 当 /user/:id/profile 匹配成功，
							// UserProfile 会被渲染在 User 的 <router-view> 中
							path: 'profile',
							component: {
								template: `<p>我是嵌套的路由组件 profile !</p>`
							}
						},
						{
							// 当 /user/:id/posts 匹配成功
							// UserPosts 会被渲染在 User 的 <router-view> 中
							path: 'posts',
							component: {
								template: `<p>我是嵌套的路由组件 posts !</p>`
							}
						}
					]
				}
			]
		})
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'hello nested-router'
				}
			},
			methods: {
				showRouter(){
					console.log('函数 showRouter')
					console.log(this.$router);
				},
				showRoute(){
					console.log('函数 showRoute')
					console.log(this.$route);
				}
			}
		}).$mount('#app');
	</script>
</body>
</html>

命名路由：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3.name-router</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<router-link v-bind:to="{name:'homeName', path:'/home'}" >Home</router-link>
		<router-view></router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		const router = new VueRouter({
			routes: [
				{
					path: '/home',
					component: {
						template: '<div>匹配 home 路径的组件</div>',
					}
				},
				{
					path: '/home',
					name: 'homeName',
					component: {
						template: '<div>匹配 home 路径, name 是 homeName 的组件</div>',
					}
				}
			]
		})
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'name-router'
				}
			},
		}).$mount('#app');
	</script>
</body>
</html>

命名视图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4.name-view</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<router-link to="/home" >Home</router-link>
		<router-view></router-view>
		<router-view name='home'></router-view>
		<router-view name='test'></router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		const router = new VueRouter({
			routes: [
				{
					path: '/home',
					components: {
						default: {
							template: '<div>默认的组件</div>',
						},
						home: {
							template: '<div>匹配 home 路径 home name 的组件</div>',
						},
						test: {
							template: '<div>匹配 home 路径 test name 的组件</div>',
						}
					}
				}
			]
		})
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'name-view'
				}
			},
		}).$mount('#app');
	</script>
</body>
</html>

重定向

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>5.redirect</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<router-link to="/home" >Home</router-link>
		<router-view></router-view>
		<router-view name='home'></router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		const router = new VueRouter({
			routes: [
				{
					path: '/home',
					components: {
						default: {
							template: '<div>默认的组件</div>',
						},
						home: {
							template: '<div>匹配 home 路径的组件</div>',
						},
					},
					redirect: {
						 name: '/home/index',
					}
				},
				{
					name: '/home/index',
					path: '/index',
					components: {
						default: {
							template: '<div>重定向的组件</div>',
						},
						home: {
							template: '<div>重定向 home 的组件</div>',
						},
					},
				}
			]
		})
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'redirect'
				}
			},
		}).$mount('#app');
	</script>
</body>
</html>

别名:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>6.alias</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<router-link to="/home" >Home</router-link>
		<router-link to="/alias" >Alias</router-link>
		<router-view></router-view>
		<router-view name='home'></router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		const router = new VueRouter({
			routes: [
				{
					alias: '/alias',
					path: '/home',
					components: {
						default: {
							template: '<div>默认的组件</div>',
						},
						home: {
							template: '<div>匹配 home 路径的组件</div>',
						},
					},
				},
			]
		})
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'alias'
				}
			},
		}).$mount('#app');
	</script>
</body>
</html>

路由组件传参:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>7.props</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<router-link to="/home/props" >Home</router-link>
		<router-view></router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		const router = new VueRouter({
			routes: [
				{
					path: '/home/:homeName',
					component: {
						props: ['homeName'],
						template: '<div>home {{ homeName }}</div>'
					},
					props: true,
					// props: {
					// 	homeName: '静态数据，不是路径'
					// },
					// props: function(){
					// 	return {
					// 		homeName: '函数返回的数据'
					// 	}
					// }
				}
			]
		})
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'props'
				}
			},
		}).$mount('#app');
	</script>
</body>
</html>

直接true

props: true,

对象：

props: {
	homeName: '静态数据，不是路径'
},

、

函数：

props: function(){
	return {
		homeName: '函数返回的数据'
	}
}

导航守卫:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>8.guard</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<router-link to="/home/aaa" >Home/aaa</router-link>
		<router-link to="/home/bbb" >Home/bbb</router-link>
		<router-link to="/test" >Test</router-link>
		<router-view></router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		const router = new VueRouter({
			routes: [
				{
					path: '/home/:id',
					component: {
						template: '<div>匹配 home 路径的组件 {{$route.params.id}}</div>',
						beforeRouteEnter (to, from, next) {
								// 在渲染该组件的对应路由被 confirm 前调用
								// 不！能！获取组件实例 `this`
								// 因为当守卫执行前，组件实例还没被创建
								console.log('home routes beforeRouteEnter')
								console.log('to:', to);
								console.log('from:', from);
								console.log('next:', next);
								next();
						},
						beforeRouteUpdate (to, from, next) {
								// 在当前路由改变，但是该组件被复用时调用
								// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
								// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
								// 可以访问组件实例 `this`
								console.log('home routes beforeRouteUpdate')
								console.log('to:', to);
								console.log('from:', from);
								console.log('next:', next);
								next();
						},
						beforeRouteLeave (to, from, next) {
								// 导航离开该组件的对应路由时调用
								// 可以访问组件实例 `this`
								console.log('home routes beforeRouteLeave')
								console.log('to:', to);
								console.log('from:', from);
								console.log('next:', next);
								next();
						}
					}
				},
				{
					path: '/test',
					component: {
						template: '<div>匹配 test 路径的组件</div>',
					},
					beforeEnter: (to, from, next) => {
						console.log('test beforeEnter')
						console.log('to:', to);
						console.log('from:', from);
						console.log('next:', next);
						next();
					}
				}
			]
		});
		router.beforeEach(function(to, from, next) {
			console.log('beforeEach to:', to);
			console.log('beforeEach from:', from);
			console.log('beforeEach next:', next);
			next();
		});
		router.afterEach((to, from) => {
			console.log('afterEach to:', to);
			console.log('afterEach from:', from);
		})
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'guard'
				}
			},
		}).$mount('#app');
	</script>
</body>
</html>

路由元信息:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>meta</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<div>
			<router-link to="/user/foo">Go to Foo</router-link>
			<router-link to="/user/bar">Go to Bar</router-link>
		</div>
		<router-view></router-view>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;

		const router = new VueRouter({
				routes: [
						{
							path: '/user/:id',
							component: {
								template: '<div>User - id: {{ $route.params.id }}</div>',
							},
							meta: { requiresAuth: true }
						}
				],
		});
		router.beforeEach((to, from, next) => {
			console.log(to.meta)
			next()
		})
		const app = new Vue({
			router: router,
			data(){
				return {
					msg: 'meta'
				}
			},
		}).$mount('#app');
	</script>
</body>
</html>

小结：

可以初步的看出来，vue-router，通过<router-link>标签实现路由的跳转，<router-view>实现页面的显示。在js中，通过VueRouter实例对象注册路由信息。

可以把vue-router看作是动态组件地显示，只是显示依据主要是路径。

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router 学习快速入门
08-31
在 `App.vue` 中，使用 `<router-view>` 组件，它会根据当前路由动态渲染对应的组件： ```html <router-view></router-view> ``` 路由参数可以通过 `params` 来动态绑定。例如，在 `/user/:id` 路由中，`:...
vue-router的常见面试题
JINGinC的博客
10-01 1863
1.怎么重定向页面？ 一： const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 二： const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] }) 三： const router = new VueRouter({
Vue路由篇
qq_45163356的博客
10-29 808
1：路由基础 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例，然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }) 记得把这个router导出去 我们可以在任
Vue路由（vue-router）详细讲解指南
weixin_30502157的博客
09-21 2156
中文文档：https://router.vuejs.org/zh/ Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）： 　　route：首先它是个单...
vue-router详解
热门推荐
大灰狼的小绵羊哥哥的博客
06-14 6万+
一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用&lt;a&gt;&lt;/a&gt;标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题vue-router二、vue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-rou...
路由跳转前后，this.$route值
Shimeng_1989的博客
06-20 7413
路由配置： { path: "/MatchingInfQT", component: MatchingInfQT, meta: { newOne:false, } }, 路由（代码处）跳转代码前后，打印this.$route（页面跳转前，改变MatchingInfQT路由的meta值） console.log(1,this.$route) this.$router.push...
vue-spa-project：vue.js + vuex + vue-router +提取+ element-ui + es6 + webpack +模拟纯前端SPA项目开发实践
02-01
vue-router（前端路由，异步加载） fetch（替代ajax，更高效地进行网络请求） element-ui（基于vue的PC端UI组件库） Webpack（自动构建） Babel预编译（ES6，SCSS等），和异步组件实现路由懒加载 ESlint代码...
搭建Vue从Vue-cli到router路由护卫的实现
10-15
现在，你已经具备了Vue项目的初步搭建和SVG图标处理能力。接下来，我们转向`Vue Router`路由卫兵（Guard）的实现。 Vue Router是Vue.js官方的路由管理器，它允许你定义路由，并在导航过程中进行控制。路由卫兵是一...
vue-cli 打包后提交到线上出现 “Uncaught SyntaxError:Unexpected token” 报错
01-21
前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载. BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/问题2区分) 问题1.导航点击无法正常跳转,console...
vue 项目初识 路由 router.md
06-11
vue 项目初识 路由 router 并进行初步配置以及简单的组件实现，初学vue router可以参考
7.vue文档API（5），destroyed的销毁阶段与key属性
official business
07-10 1380
简介: vue的销毁，销毁的不是相关元素，甚至vue实例也没有被销毁，而是数据与dom关系。 销毁调用的方法： 触发销毁的函数，调vue实例对象的$destroy函数即可。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vueTest</title> <script src="https://cdn.jsdelivr.ne
5.vue文档API（3），created的初始化阶段与mounted挂载阶段以及渲染相关
official business
07-08 964
简介：
6.vue文档API（4），updated的更新阶段以及数据与函数
official business
07-09 729
数据: 在vue实例中的一个对象，用于存储数据。可在渲染的html中进行调用。代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vueTest</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> &l
3.vue文档API（1）：基础的配置
official business
06-30 576
1.简介: 对vue可调用的接口API集合：https://cn.vuejs.org/v2/api/ 2.全局配置： 即可直接对Vue的属性进行配置操作。 silent： 取消 Vue 所有的日志与警告。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>silent</title> <script src="https:
9.vue实例信息、属性继承、自定义以及内部事件
official business
07-11 371
实例信息 $data：对实例地data对象属性地访问； $props：对组件实例地props对象属性地访问； $el：访问实例使用的根 DOM 元素； $options：访问实例所有属性； $isServer：当前 Vue 实例是否运行于服务器。； $attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以...
12.vue-router相关API（1）router-link和router-view
official business
07-12 361
官网链接：https://router.vuejs.org/zh/api <router-link>： <router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 to： 表示目标路由的链接。 <!DOCTYPE html> <html...
13.vue-router相关API（2）Router
official business
07-13 217
Router 构建选项： routes： 用于将路径和页面组件绑定。 interface RouteConfig = { path: string, // 路径 component?: Component, // 单个视图组件 name?: string, // 命名路由 components?: { [name: strin
2.简单地使用vue组件
official business
06-25 177
开始： 之前的vue指令，操作的都是单个的html标签，与此对应的，还有将多个标签组到一起的组件，即一个自定义的组件标签内部，是多个原始的html标签。 组件创建： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo-component</title> <script src="https://cdn.jsdeli.
vue-2.4.0.js vue-router-3.0.1.js
最新发布
09-06
vue-2.4.0.js和vue-router-3.0.1.js是Vue.js框架的两个重要组成部分。 首先，vue-2.4.0.js是Vue.js的核心库，它是一个用于构建用户界面的渐进式框架。它采用了MVVM模式，主要用于简化用户界面的开发，提高开发效率...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值