vue中的路由vue-router

时间:2021-05-30 12:21:56

最近在重新学习vue整理一下自己学习的一些觉得重要的知识点

在实际项目中我们会遇到各种各样的页面跳转与嵌套就有了1.动态路由2.嵌套路由3.编程式路由4.命名路由

1.动态路由,什么是动态路由就是类似于:(运用场景一般就是商城的详情页面)

模式 匹配路由 $route.params
/user/:username /user/evan {username:'evan'}
/user/:username/post/:post_id /user/evan/post/123 {username:'evan',post_id:123}
传一个参数的时候在router/index.js中
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/HelloWorld/:post_id',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

在HelloWorld页面中
<template>
  <div class="hello">
    这是一个hello页面的内容
      <!-- 获取路由中带有的的id -->
  <span>{{$route.params.post_id}}</span>

  </div>
</template>

第二中模式,传递两个参数的时候
index.js中的
  path: '/HelloWorld/:post_id/user/:name',
  HelloWorld页面中获取两个参数
  <span>{{$route.params.post_id}}</span>
   <br>
  <span>{{$route.params.name}}</span>
注意:post_id和name必须与path中的:后的名字一样

 

2.嵌套路由

什么是嵌套路由:就是路由中嵌套路由就叫嵌套路由

在iindex.js中路由的写法
import Vue from
'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' //引入两个组件 import Title from '@/components/title' import Img from '@/components/image' Vue.use(Router) export default new Router({ //定义路由 routes: [ { path: '/hello', name: 'HelloWorld', component: HelloWorld, //子路由 children:[ { path:'title', name:Title, component:Title }, { path:'image', name:Img, component:Img } ] } ] }) 然后在父组件中即HelloWorld.vue中 <template> <div class="hello"> 这是一个hello页面的内容 <router-link to='/hello/title'>显示标题</router-link> <router-link to='/hello/image'>显示图片</router-link> //子路由的出口router-view <div> <router-view></router-view> </div> </div> </template>

 

3.编程式路由

编程式路由就是通过js来实现页面的跳转

$router.push('name')

$router.push({path: 'name' })

$router.push({path:'name?a=123'})或者是$router.push({path:"name',query:{a=123}})

$router.go(1)下一步 

$router.go(0)刷新

$router.go(-1)后退一步

4.命名路由和命名视图

命名路由
index.js中的路由 { path:
'cart', name:cart, component:Cart } HelloWorld.vue页面中 <router-link :to='{name:cart}'>跳转到购物车页面</router-link> 注意to为动态绑定

如果是动态路由
{
path:"/cart/:cartId",
name:Cart,
component:Cart
}
 
命名视图
index.js中的路由是
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//引入两个组件
import Title from '@/components/title'
import Img from '@/components/image'

import Cart from '@/components/cart'

Vue.use(Router)

export default new Router({
//定义路由
routes: [
{
path: '/hello',
name: 'HelloWorld',
components:{
default:HelloWorld,
title:Title,
image:Img
}
},
{
path:"/cart",
name:Cart,
component:Cart
}
]
})
 
app.vue页面中的视图是
 
//页面默认的视图  
<router-view/>
//命名视图
<router-view name='title'></router-view>
<router-view name='image'></router-view>
 

有什么错误希望大家指出,共同学习哈哈哈~~

 

相关文章