vue-router的基本使用

演示demo的工程结构

在index.js中引用vue-router

import VueRouter from 'vue-router'

Vue.use(VueRouter)

定义并导出路由

export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: '/home/news',
          component: News
        },
        {
          path: 'message',
          component: Message,
          children: [
            {
              path: 'detail/:id',
              component: MessageDetail
            }
          ]
        }]
    },
    {
      path: '/',
      redirect: '/about'
    }
  ]
})

全局使用(main.js中)

使用router对象

import Vue from 'vue'
import App from './App'
import VueRouter from './router'


new Vue({
  el:'#app',
  components:{
    App
  },
  template:'<App/>',
  router:VueRouter
})

页面中使用路由:

<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
<router-view >路由匹配到的组件将渲染在这里

<router-link> 相关属性

to

表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

replace

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

append

设置 append 属性后，则在当前 (相对) 路径前添加其路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

路由跳转

可以使用replace进行页面替换：

this.$router.replace({ name: _name });

也可以使用push进行跳转:

   this.$router.push({ path: "/" });

它们的区别如下:

App.vue

 <template>
    <div class="row">
      <div class="list-group">
         <!--生成路由链接-->
         <!-- 使用 router-link 组件来导航. -->
   	  	 <!-- 通过传入 `to` 属性指定链接. -->
  		 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
         <router-link to="/about" class="list-group-item">About</router-link>
         <router-link to="/home" class="list-group-item">Home</router-link>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--显示当前组件-->
            <keep-alive>
              <!-- 路由出口 -->
  			  <!-- 路由匹配到的组件将渲染在这里 -->
  			  <!--将msg="abc"传递到所匹配到的路由组件-->
              <router-view msg="abc"></router-view>
            </keep-alive>
          </div>
        </div>
      </div>
   </div>
</template>

About.vue

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

<script>
  export default {
    props:{
      msg:String
    }
  }
</script>

Home.vue

<template>
  <div>
    <h2>Home</h2>

    <ul class="nav nav-tabs">
      <li>
        <router-link to="/home/news">News</router-link>
      </li>
      <li>
        <router-link to="/home/message">Message</router-link>
      </li>
    </ul>

    <router-view></router-view>
  </div>
</template>

<script>
  export default {}
</script>

News.vue

<template>
  <div>444
  </div>
</template>

<script>
  export default {}
</script>

Message.vue

<template>
  <div>333
  </div>
</template>

<script>
  export default {}
</script>

MessageDetail.vue

<template>
  <div>555
  </div>
</template>

<script>
  export default {}
</script>

页面显示

/about

/home/news

/home/message