vue中的路由vue-router

最近在重新学习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页面中获取两个参数

{{$route.params.post_id}}

{{$route.params.name}}

注意：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>

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

扫描二维码关注公众号，回复： 868887 查看本文章

vue中的路由vue-router

猜你喜欢