vue中的路由(vue-router)

我们今天来聊一下vue-router，也就是vue中为我们的路由。
有些小伙伴可能就想,我们为什么要用路由呢？我直接写个a标签不一样可以让页面跳转吗？
我们要知道vue是一个mvvm框架,主要做的就是单页面的应用.这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

我们先通过vue-cli脚手架工具帮我们生成目录后，我们观察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: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

这里是index.js中代码,它主要管理页面路由的跳转。
那么,我们现在来为我们的应用程序添加一个路由板块。
1.在src/components目录下，新建 Hi.vue 文件。
2.Hi.vue分成了template script style这三个部份
我们在Hi.vue中添加以下代码:

<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
    export default{
        name:"hi",
        data(){
            return {
                msg:"我是hi页面"
            }
        }
    }

</script>

<style>
</style>

那么我们就创建好一个Hi.vue的组件,这个时候都还不可以,我们创建了组件,但是并没有导入我们的index.js文件中.

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import hi from '@/components/hi'

Vue.use(Router)

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

这个时候我们就可以在浏览器的地址栏中,输入/hi,就会看到页面的变化.
然后我们希望它是可以点击跳转链接的,那么我们就回到app.vue中,添加router-link标签

<template>
  <div id="app">


  <div>
        **<router-link to="/">首页</router-link>**
        **<router-link to="/hi">HI页面</router-link>**
  </div>  


   <router-view></router-view>


  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

那么这个时候,我们就可以实现路由的点击跳转了。

2.vue-router配置子路由
我们来看下,怎么在hi组件里面建立子路由.
hi.vue

<template>
    <div>
        {{msg}}
        <router-view></router-view>

    </div>
</template>

<script>
    export default{
        name:"hi",
        data(){
            return {
                msg:"我是hi页面"
            }
        }
    }

</script>

<style>
</style>

我们需要在template下方，编写一个router-view这样的一个标签,方便于路由的跳转。
1.我们在src/components下,建立两个vue的文件,命名为hi1.vue和,hi2.vue.
2.在index.js中添加组件路径和配置路由参数。
index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import hi from '@/components/hi'
import hi1 from '@/components/hi1'
import hi2 from '@/components/hi2'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    },
    {
        path:"/hi",
        name:"hi",
        component:hi,
        children:[
            {path:"/",component:hi},
            {path:"hi1",component:hi1},
            {path:"hi2",component:hi2}
        ]
    }
  ]
})

在这里我们需要注意,要给,hi组件下配置一个参数children，这个参数是接收一个数组的,这里要注意.还有一个地方,我们在配置路径(path)的时候,不可以在前面加”/”,千万要注意这个问题。

路径配好后,我们返回app.vue中,编写router-link

<template>
  <div id="app">


  <div>
        <router-link to="/">首页</router-link>
        <router-link to="/hi">HI页面</router-link>
        <router-link to="/hi/hi1">HI页面</router-link>
        <router-link to="/hi/hi2">HI页面</router-link>
  </div>  


   <router-view></router-view>


  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

可以实现了子路由的跳转了。

3.vue-router中如何传递参数

一.用name来进行参数传递
在index.js中配置一个name属性

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import hi from '@/components/hi'
import hi1 from '@/components/hi1'
import hi2 from '@/components/hi2'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    },
    {
        path:"/hi",
        component:hi,
        children:[
            {path:"/",component:hi,name:"hi"},
            {path:"hi1",component:hi1,name:"hi1"},
            {path:"hi2",component:hi2,name:"hi2"}
        ]
    }
  ]
})

那么我们在app.vue中可以获取到name这个属性,利用$route方式来获取。

<template>
  <div id="app">


  <div>
        <router-link to="/">首页</router-link>
        <router-link to="/hi">HI页面</router-link>
        <router-link to="hi/hi1">HI1页面</router-link>
        <router-link to="/hi/hi2">HI2页面</router-link>
  </div>  
    <p>{{$route.name}}</p>

   <router-view></router-view>


  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

通过$route.name可以获取name的值。

二.通过router-link标签中的to传参
我们在app.vue适当做点改造
app.vue

<template>
  <div id="app">


  <div>
        <router-link to="/">首页</router-link>
        <router-link to="/hi">HI页面</router-link>
        <router-link :to="{name:'hi1',params:{username:'huangkafei',id:'988'}}">HI1页面</router-link>
        <router-link to="/hi/hi2">HI2页面</router-link>
  </div>  
    <p>{{$route.name}}</p>

   <router-view></router-view>


  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我们第三个router-link中,to属性前面添加了:,添加:后,所有的参数都是以对象的形式传递。
hi1.vue

<template>
    <div>
        {{msg}}--{{$route.params.username}}--{{$route.params.id}}


    </div>
</template>

<script>
    export default{
        name:"hi1",
        data(){
            return {
                msg:"我是hi1页面"
            }
        }
    }

</script>

<style>
</style>

4.单页面多区域路由操作
我们以上的操作都是在一个router-view里面操作的,那么假设我们有3个或者是多个以上的router-view呢？
我们在app.vue下面写多两个router-view

<template>
  <div id="app">


  <div>
        <router-link to="/">首页</router-link>
        <router-link to="/hi">HI页面</router-link>
        <router-link :to="{name:'hi1',params:{username:'huangkafei',id:'988'}}">HI1页面</router-link>
        <router-link to="/hi/hi2">HI2页面</router-link>
  </div>  
    <p>{{$route.name}}</p>

   <router-view></router-view>
     <router-view name="left"></router-view>
     <router-view name="right"></router-view>

  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我们在上面额外添加了router-view，那么这种情况怎么处理呢？
index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import hi from '@/components/hi'
import hi1 from '@/components/hi1'
import hi2 from '@/components/hi2'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components:{
        default:HelloWorld,
        left:hi1, //对应router-view的name
        right:hi2 //对应router-view的name
      }
    },
    {
        path:"/hi",
        component:hi,
        children:[
            {path:"/",component:hi,name:"hi"},
            {path:"hi1",component:hi1,name:"hi1"},
            {path:"hi2",component:hi2,name:"hi2"}
        ]
    }
  ]
})

vue中的路由(vue-router)

猜你喜欢