Vue动态路由
3.router 是一个机制,相当于一个管理者,它来管理路由。区别:this.$router.push()跳转到指定的url,会向history插入新记录this.$router.replace() 同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。传参的时候,向query中写入数据, 当你 在 点击按钮,访问组件的时候, 地址栏中,会显示
预览:1.1.1 什么是动态路由
你可以在一个路由中设置多段“路径参数”,对应的值都会设置到$route.params中。例如:
核心代码演示:
var User = { template:"<div>用户:{{$route.params.id}}</div>"}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数
{ path: "/user/:id", component: User },
]
})
1.1.2 动态路由传参,组件接收数据的多种实现方式
1.通过$route.params来获取路径参数
var User = { template:"<div>用户:{{$route.params.id}}</div>"}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数
{ path: "/user/:id", component: User },
]
})
传1个参数:
<div id="app">
<router-link to="/login">登陆</router-link>
<router-link to="/user/100">用户中心</router-link>
<router-view></router-view>
</div>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
//定义组件
let login ={
template:`
<div>
<h1>我是登录页面</h1>
</div>
`
}
//用户中心组件
let user={
template:`
<div>
<h1>我是用户中心页面</h1>
<h2>用户id是:{{$route.params.id}}</h2>
</div>
`,
mounted(){
console.log(this.$route);
}
}
//实例化
let myvueRouter=new VueRouter({
//配置路由
routes:[
{
path:'/',
redirect: '/login'
},
{
path:'/login',
name:'login',//命名路由
component:login
},
{
//动态传参
//传1个
path:'/user/:id',
name:'user',//命名路由
component:user
}
]
})
var vm=new Vue({
//模板选择器
el:'#app',
//数据中心
data(){
return{
}
},
methods:{
},
router:myvueRouter,
components: {
login,user
}
})
</script>
预览:
传多个参数:
<div id="app">
<router-link to="/login">登陆</router-link>
<router-link to="/user/xy/100">用户中心</router-link>
<router-view></router-view>
</div>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
//定义组件
let login ={
template:`
<div>
<h1>我是登录页面</h1>
</div>
`
}
//用户中心组件
let user={
template:`
<div>
<h1>我是用户中心页面</h1>
<h2>用户id是:{{$route.params.id}}</h2>
<h2>用户名是:{{$route.params.username}}</h2>
</div>
`,
mounted(){
console.log(this.$route);
}
}
//实例化
let myvueRouter=new VueRouter({
//配置路由
routes:[
{
path:'/',
redirect: '/login'
},
{
path:'/login',
name:'login',//命名路由
component:login
},
{
//动态传参
//传多个
path:'/user/:username/:id',
name:'user',//命名路由
component:user
}
]
})
var vm=new Vue({
//模板选择器
el:'#app',
//数据中心
data(){
return{
}
},
methods:{
},
router:myvueRouter,
components: {
login,user
}
})
</script>
预览:
<div id="app">
<router-link to="/login">登陆</router-link>
<router-link to="/user/xy/post/150">用户中心</router-link>
<router-view></router-view>
</div>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
//定义组件
let login ={
template:`
<div>
<h1>我是登录页面</h1>
</div>
`
}
//用户中心组件
let user={
template:`
<div>
<h1>我是用户中心页面</h1>
<h2>用户id是:{{$route.params.post_id}}</h2>
<h2>用户名是:{{$route.params.username}}</h2>
</div>
`,
mounted(){
console.log(this.$route);
}
}
//实例化
let myvueRouter=new VueRouter({
//配置路由
routes:[
{
path:'/',
redirect: '/login'
},
{
path:'/login',
name:'login',//命名路由
component:login
},
{
//动态传多个参数,并且路径的层级 多一些
path:'/user/:username/post/:post_id',
name:'user',//命名路由
component:user
}
]
})
var vm=new Vue({
//模板选择器
el:'#app',
//数据中心
data(){
return{
}
},
methods:{
},
router:myvueRouter,
components: {
login,user
}
})
</script>
预览:
2.通过props来接收参数(使用props:true)
var User = {
props:['post_id','username'],
template:" <div>
<h1>我是用户中心页面</h1>
<h2>用户id是:{{post_id}}</h2>
<h2>用户名是:{{username}}</h2>
</div>"
}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数
//如果props设置为true,route.params将会被设置为组件属性
{ path:'/user/:username/post/:post_id',
name:'user',//命名路由
component:user,
props:true },
]
})
预览:
3.我们可以将props设置为对象,那么就直接将对象的数据传递给组件进行使用
<div id="app">
<router-link to="/login">登陆</router-link>
<router-link to="/user">用户中心</router-link>
<router-view></router-view>
</div>
//定义组件
let login ={
template:`
<div>
<h1>我是登录页面</h1>
</div>
`
}
//用户中心组件
let user={
props:['nickname','age'],
template:`
<div>
<h1>我是用户中心页面</h1>
<h2>昵称是:{{nickname}}</h2>
<h2>年龄是:{{age}}</h2>
</div>
`,
mounted(){
console.log(this.$route);
}
}
// 创建路由实例并配置路由规则
Vue.use(VueRouter)
let myrouter = new VueRouter({
// routes是路由规则数组
routes:[
// 每一个路由规则都是一个对象,对象中至少包含path和component两个属性
{
// 我决定你在 router-link上 ,按照我的要求去写参数
path:'/user',
component:User,
props:(route)=>({
nickname:'小余',
age:19
})
},
{
path:'/regis',
component:Register
}
]
})
预览:
4.如果想要获取传递的参数值还想要获取传递的对象数据,那么props应该设置为函数形式
<div id="app">
<router-link to="/login">登陆</router-link>
<router-link to="/user/100">用户中心</router-link>
<router-view></router-view>
</div>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
//定义组件
let login ={
template:`
<div>
<h1>我是登录页面</h1>
</div>
`
}
//用户中心组件
let user={
props:['nickname','age','id'],
template:`
<div>
<h1>我是用户中心页面</h1>
<h2>昵称是:{{nickname}}</h2>
<h2>年龄是:{{age}}</h2>
<h2>编号是:{{id}}</h2>
</div>
`,
mounted(){
console.log(this.$route);
}
}
//实例化
let myvueRouter=new VueRouter({
//配置路由
routes:[
{
path:'/',
redirect: '/login'
},
{
path:'/login',
name:'login',//命名路由
component:login
},
{
//动态传参
//动态传1个参,
path:'/user/:id',
name:'user',//命名路由
component:user,
props:(route)=>({
nickname:'小马过河',
age:19,
id:route.params.id
})
}
]
})
var vm=new Vue({
//模板选择器
el:'#app',
//数据中心
data(){
return{
}
},
methods:{
},
router:myvueRouter,
components: {
login,user
}
})
</script>
预览:
1.1.3 脚本访问路由(编程式导航访问路由)
路由中有三个基本的概念 route, routes, router
1.route 它是一条路由,由这个英文单词也可以看出来,它是单数。 Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。
2.routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。路由规则[{home 按钮 =>home内容 }, { about按钮 => about 内容}]
3.router 是一个机制,相当于一个管理者,它来管理路由。路由对象。路由管理器。因为routes只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。
路由的跳转方式2种:
(1)通过标签:<router-link to='/login'></router-link>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-link to="/user">我的</router-link>
<router-view></router-view>
(2)通过js控制跳转this.$router.push({path:'/login'})
this.$router 路由操作对象中有 2个方法 ,可以实现路由的跳转。这两个方法分别是 push() 和replace()。
区别:this.$router.push() 跳转到指定的url,会向history插入新记录this.$router.replace() 同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。
this.$router.go(-1) 常用来做返回,读history里面的记录后退一个
vue-router中的对象:$route 路由信息对象,只读对象$router 路由操作对象,只写对象
this.$router.push() 跳转到指定的url,同时会向history历史记录对象中插入新记录。例如:
<div id="app">
<button @click="toLogin">登录</button>
<button @click="toRegister">注册</button>
<button @click="toUser">用户中心</button>
<button @click="toShop">商品</button>
<button @click="goBack">返回上一步</button>
<router-view></router-view>
</div>
<template id="login">
<div>
<h1>登录页面</h1>
</div>
</template>
<template id="register">
<div>
<h1>注册页面</h1>
</div>
</template>
<template id="user">
<div>
<h1>用户中心页面</h1>
</div>
</template>
<template id="shop">
<div>
<h1>商品页面</h1>
</div>
</template>
<script>
// 登录组件
const Login = {
template:'#login'
}
// 注册组件
const Register = {
template:'#register'
}
// 用户中心组件
const User = {
template:'#user'
}
// 商品组件
const Shop = {
template:'#shop'
}
// 创建路由实例并配置路由规则
Vue.use(VueRouter)
let myrouter = new VueRouter({
// routes是路由规则数组
routes:[
{
path:'/login',
component:Login
},
{
path:'/regis',
component:Register
},
{
path:'/user',
component:User
},
{
path:'/shop',
component:Shop
},
]
})
// 根组件
// 将路由挂载到Vue实例中
let vm = new Vue({
el:'#app',
data:{
},
// 通过router属性挂载路由对象
router:myrouter,
methods:{
toLogin(){
// $router 路由操作对象,只写对象
// this.$router.push('/login')
this.$router.push({path:'/login'})
console.log(history);
},
toRegister(){
this.$router.push({path:'/regis'})
console.log(history);
},
toUser(){
this.$router.replace({path:'/user'})
console.log(history);
},
toShop(){
},
goBack(){
this.$router.go(-1)
}
},
components:{
Login,
Register,
User,
Shop
}
})
</script>
this.$router.replace() 同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。
注意:
如果你使用的是this.$router.repalce() 方法 进行的路由跳转。我们不能使用 this.$router.go() 。因为go() 方法读的是history历史记录对象 上一个记录。
预览:
1.1.4 脚本访问路由并传参
路由传参---通过js脚本传参
我们 在 自己的组件中例如我们在登录组件login中的生命周期钩子函数created中 用this.$route 路由信息对象,只读对象 ,去方式 js脚本路由传参,传递过来的数据。
这个数据,我们只要能访问到,我们就可以在自己的组件中,任意的去自由的使用。
传参的时候,向query中写入数据; 在组件中取参的时候, 从query读取数据
特点:
传参的时候,向query中写入数据, 当你 在 点击按钮,访问组件的时候, 地址栏中,会显示 你向query中 写入的数据。
<template id="login">
<div>
<h1>登录页面</h1>
<h2>{{lid}}</h2>
<h2>{{lname}}</h2>
</div>
</template>
<script>
// 登录组件
const Login = {
template:'#login',
data(){
return{
lid:'',
lname:'',
}
},
mounted(){
this.lid=this.$route.query.uid;
this.lname=this.$route.query.uname
}
}
// 注册组件
const Register = {
template:'#register'
}
// 用户中心组件
const User = {
template:'#user'
}
// 商品组件
const Shop = {
template:'#shop'
}
// 创建路由实例并配置路由规则
Vue.use(VueRouter)
let myrouter = new VueRouter({
// routes是路由规则数组
routes:[
{
path:'/login',
component:Login
},
{
path:'/regis',
component:Register
},
{
path:'/user',
component:User
},
{
path:'/shop',
component:Shop
},
]
})
// 根组件
// 将路由挂载到Vue实例中
let vm = new Vue({
el:'#app',
data:{
},
// 通过router属性挂载路由对象
router:myrouter,
methods:{
toLogin(){
// $router 路由操作对象,只写对象
// this.$router.push('/login')
this.$router.push(
{path:'/login',
query:{
uid:110,uname:'xy'
}
}
)
// console.log(history);
},
toRegister(){
this.$router.push({path:'/regis'})
console.log(history);
},
toUser(){
this.$router.replace({path:'/user'})
console.log(history);
},
toShop(){
},
goBack(){
this.$router.go(-1)
}
},
components:{
Login,
Register,
User,
Shop
}
})
</script>
预览:
传参的时候,向params中写入数据; 在组件中取参的时候, 从params读取数据
<div id="app">
<button @click="toLogin">登录</button>
<button @click="toRegister">注册</button>
<button @click="toUser">用户中心</button>
<router-link :to="{name:'shop',params:{gid:120,gname:'手机'}}">商品</router-link>
<button @click="goBack">返回上一步</button>
<router-view></router-view>
</div>
<template id="login">
<div>
<h1>登录页面</h1>
<h2>{{lid}}</h2>
<h2>{{lname}}</h2>
</div>
</template>
<template id="register">
<div>
<h1>注册页面</h1>
</div>
</template>
<template id="user">
<div>
<h1>用户中心页面</h1>
</div>
</template>
<template id="shop">
<div>
<h1>商品页面</h1>
<h2>商品id:{{sid}}</h2>
<h2>商品名称:{{sname}}</h2>
</div>
</template>
<script>
// 登录组件
const Login = {
template:'#login',
data(){
return{
lid:'',
lname:'',
}
},
mounted(){
this.lid=this.$route.query.uid;
this.lname=this.$route.query.uname
}
}
// 注册组件
const Register = {
template:'#register'
}
// 用户中心组件
const User = {
template:'#user'
}
// 商品组件
const Shop = {
template:'#shop',
data(){
return{
sid:'',
sname:'',
}
},
mounted(){
console.log(this.$route);
this.sid=this.$route.params.gid
this.sname=this.$route.params.gname;
}
}
// 创建路由实例并配置路由规则
Vue.use(VueRouter)
let myrouter = new VueRouter({
// routes是路由规则数组
routes:[
{
path:'/login',
component:Login
},
{
path:'/regis',
component:Register
},
{
path:'/user',
component:User
},
{
path:'/shop',
name:'shop',
component:Shop
},
]
})
// 根组件
// 将路由挂载到Vue实例中
let vm = new Vue({
el:'#app',
data:{
},
// 通过router属性挂载路由对象
router:myrouter,
methods:{
toLogin(){
// $router 路由操作对象,只写对象
// this.$router.push('/login')
this.$router.push(
{
path:'/login',
query:{
uid:110,uname:'xy'
}
}
)
// console.log(history);
},
toRegister(){
this.$router.push({path:'/regis'})
console.log(history);
},
toUser(){
this.$router.push({path:'/user'})
console.log(history);
},
toShop(){
},
goBack(){
this.$router.go(-1)
}
},
components:{
Login,
Register,
User,
Shop
}
})
</script>
预览:
更多推荐
所有评论(0)