v-router路由参数

v-router路由参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		</div>
	</body>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src=".\node_modules\vue-router\dist\vue-router.js">
	</script>

	<script type="text/javascript">
		// 3、让Vue 使用VueRouter创建
		// Vue.use(VueRouter);

		var UserParams = {
			template: `
				<div>我是用户1</div>
			`,
			// 当引入vue-router时 会抛出两个全局对象 挂载到Vue实例化对象
			created() {
				console.log(this.$router); // this.$router(它就是VueRouter)
				
				// 获取传过来的id值  可以拿着这个id去向后端发起请求获取响应数据
				console.log(this.$route.params.id); // this.$route(配置路由信息对象)
			},

		};

		var UserQuery = {
			template: `
				<div>我是用户2</div>
			`,
		};

		// 4、创建router对象
		// 路由范式
		// 1)xxxx.html#user/1          params 动态路由参数
		// 2)xxxx.html#/user?userId=1  query 参数查询
		var router = new VueRouter({
			// 5、配置路由对象
			routes: [
				// 路由匹配的规则
				{
					// 动态路由参数 以冒号开头
					path: '/user/:id',
					component: UserParams,
					// 给当前路由命名
					name: 'userP',
				},
				{
					path: '/user',
					component: UserQuery,
					name: 'userQ',
				},
			]
		});
		// 引入vue-router模块后 会抛出两个全局组件 
		// 1)router-link 相当于a标签,里面的to属性相当于href属性
		// 2)router-view 路由匹配组件出口 (它渲染的组件是你使用 vue-router 指定的)
		var App = {
			template: `
				<div>
					<!--绑定to属性 通过路由名字匹配对应的组件-->
					<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>
			`,
		}
		new Vue({
			el: '#app',
			data() {
				return {
				}
			},
			components: {
				App
			},
			// 6、交给Vue实例化对象管理
			router: router,
			template: `
				<App/>
			`,
		});
	</script>
</html>

总结

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值