router-link和router-view

router-link 标签

<router-link to='./home'></router-link> //vue 内置标签 在渲染时渲染成a标签在点击的情况路由中的页面在<router-view>标签中渲染 to属性可以跳转页面 tag="button" 属性可以渲染成想要的原生标签

类似a标签

<a href="#/User">用户管理1</a> <router-link to="/user"> 用户管理2</router-link>

这里写法需要在router中配置

router-view标签

<router-view></router-view>写在组件想要渲染的地方,等组件跳转过来就渲染

路由的参数传递

 

<template> <div id="app"> //active-class="active"改变他动态添加的名字 //replace 不能返回 直接写在标签内 默认事pushState 可以返回 <router-link to = '/home' tag="button" replace active-class="laozhang">首页</router-link> <router-link to = "/about" tag="button" replace active-class="laozhang">关于</router-link> <button @click="fn1">首页</button> <button @click="fn2">关于页</button> //hash嘻哈值数据 <router-link :to = "'/user/'+userId" tag="button" replace active-class="laozhang">用户</router-link> //查询串数据 <router-link :to = "{path:'/profile',query:{name:'laowang',age:18}}" tag="button" replace active-class="laozhang">用户</router-link> <router-link @click="fn3" tag="button" >档案</router-link> <router-view> </router-view> </div> </template> <script> export default { name: 'app', data(){ return { $router:'', userId:'lisi' } }, methods:{ fn1(){ //this.$router拿到当前页面的url通过push拼接url,push进去的浏览器可以返回原页面 this.$router.push('/home') }, fn2(){ this.$router.push('/about') }, fn3(){ this.$router.push({//将数据携带在url上 path:'/profile', query:{//查询串数据 name:'laowang', age:18 } }) } } } </script> <style> @import"assets/css/base.css"; .laowang{ color: aquamarine; } .laozhang{ background: rgb(221, 49, 49); } </style>

数据获取

通过url访问组件的时候将数据带到了组件,在组件中渲染

 

<template> <div> <h2>我是用户界面</h2> <p>我是用户相关信息,呵呵呵</p> <h2>{{userId}}</h2> <h2>{{$route.params.userId}}</h2> </div> </template> <script> export default { name:'User', computed:{ userId(){//计算属性, $route拿到的是活越的路由params数参数//$route是我们new的router路由 return this.$route.params.userId } } } </script>>

query数据接收

 

<template> <div> <h2>我的组件</h2> <p>地址,浏览历史</p> <h2>{{$route.query.name}}</h2> <h2>{{$route.query.age}}</h2> <h2>{{Obj.name}}</h2> </div> </template> <script> export default { name:'profile', computed:{ userId(){//计算属性, $route拿到的是活越的路由params数参数//$route是我们new的router路由 return this.$route.params.userId }, Obj(){ return this.$route.query } } } </script>>