vue-router使用入門

安裝及基本配置

# 安裝
npm install vue-router

# 使用
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new Router({
  routes: [
    {
      path: '/',
      component: Index
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

傳參和參數獲取

屬性傳參

# 路由
{
  path: 'info/:name',
  ...
}

# 參數配置
<router-link to="/info/張三">張三</router-link>

# 獲取
{{$route.params.name}} // 張三

哈希傳參

# 路由
{
  path: 'info',
  ...
}

# 參數配置
<router-link to="/info?name=李四&age=23">關於</router-link>

# 獲取
{{$route.params.name}} // 李四 23

子路由

在路由中嵌套children，實現子路由配置， 子路由必須配置專屬的router-view，用於頁面渲染。

{
  path: '/profile',
  component: Profile,
  children: [
    {
      path: 'info/:name',
      components: {
        asideContent: Infos
      }
    },
    {
      path: 'star',
      components: {
        asideContent: Star
      }
    }
  ]
}

手動訪問和傳參

路由配置：

{
  path: '/logout/:name',
  name: 'logout', // 在手動跳轉的路由中使用
  component: Logout
}

模板配置：

# 這裏click方法不能寫在a標籤上面
<li @click="logout">
    <a href="javascript:;">手動退出</a>
</li>

控制器配置：

<script>
export default {
  methods: {
    logout() {
      // 手動設置跳轉路徑
      // this.$router.push('logout');
      // 傳參寫法
      this.$router.push({name: 'logout', params: {name: '張三'}})
    }
  }
};
</script>

命名視圖

命名視圖多用在左菜單右內容的位置，好比網站的我的中心

路由配置：

{
  path: '/profile',
  component: Profile,
  children: [
    {
      path: 'info/:name',
      components: {
        # 這裏配置視圖展現
        // default: Infos # 若是隻有一個視窗，這裏能夠設置默認值
        asideContent: Infos
      }
    }
  ]
}

模板配置：

<template>
  <div class="row">
    <div class="col-md-9">
      # 命名視圖展現位置
      <router-view name="asideContent"></router-view>
    </div>
    <div class="col-md-3">
      <ul class="list-group">
        <li class="list-group-item">
          <router-link to="/profile/info/張三">我的信息</router-link>
        </li>
        <li class="list-group-item">
          <router-link to="/profile/star">個人積分</router-link>
        </li>
        <li class="list-group-item">
          <router-link to="/info">我的信息</router-link>
        </li>
        <li class="list-group-item">
          <router-link to="/info">我的信息</router-link>
        </li>
        <li class="list-group-item">
          <router-link to="/info">我的信息</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>