vue 路由的方式，带参数

最新推荐文章于 2024-04-29 20:03:13 发布

新藤一郎

最新推荐文章于 2024-04-29 20:03:13 发布

阅读量188

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43854764/article/details/93624240

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!--<a href="#/login">登录</a>
			<a href="#/register">注册</a>-->
			<router-link to='/login/12/zhanghong'>登录</router-link>
			<router-link to="/register">注册</router-link>
			<!--router-view提供的规则，专门用来当占位符的，匹配到的组件将会展示到router-view-->
			<router-view ></router-view>
			
		</div>
		
		<script>
			var login={
				template:"<div>登录组件----{{$route.params.id}}----{{$route.params.name}}</div>",
				data:function(){
					return{
						msg:"章鸿运"
					}
					
				},
				created(){
					console.log(this.$route)
				}
			}
			var register={template:"<div>注册组件</div>"}
			
			var routeObj=new VueRouter({
				routes:[/*路由匹配规则，每一个路由匹配规则都是一个对象*/
				/*属性1是path，表示监听哪个路由的地址*/
				/*属性2是component 表示如果路由是匹配到的path 则展示对应的那个组件 */
				/*注意component的属性值必须是一个模板的对象，不能是一个引用值*/
				/*第一个path后面带入了参数*/
					{path:'/login/:id/:name',component:login},
					{path:'/register',component:register}
				]
			})
			var vu=new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:routeObj//将路由规则对象挂载到vu的实例上,监听URL的变化.
			})
		</script>
	</body>
</html>

新藤一郎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 路由的方式，带参数

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="vue.js"></script> <script src="vue-router.js"></sc...
复制链接

扫一扫

专栏目录