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>