Vue Route使用记录

Vue Router

声明式路由导航配置

菜单路由配置

场景描述：

<template>
  <div>
    <HeaderHtml></HeaderHtml>
    <NavHtml></NavHtml>
    <amfContentHtml></ContentHtml>
    <FooterHtml></FooterHtml>
  </div>
</template>
<script>
  import HeaderHtml from '../common/HeaderHtml' //引入组件 使用相对路径 
  import NavHtml from '../common/NavHtml' //【../退一级目录】，【./当前目录】
  import ContentHtml from '../common/ContentHtml'
  import FooterHtml from '../common/FooterHtml'

    export default {
      name: "HomePage",
      components:{
        HeaderHtml,
        NavHtml,
        ContentHtml,
        FooterHtml
      }
    }
</script>

这是一个简单的页面布局，分为头部区/菜单区/主体区/底部区，所有的菜单在点击后都要在主体区进行展示，要实现上述功能需要三个步骤。

配置router文件夹下index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/common/Login'  //引入定义的组件
import HomePage from '../components/common/HomePage'
import ErrorPage from '../components/common/ErrorPage'
import MenuClickShowPage1 from '../components/page/MenuClickShowPage1'

export default new Router({
  routes: [
    {
      path: '/',    //配置访问路径
      name: 'Login',  
      component: Login  //绑定组件
    },
    {
       path: '/HomePage',
       name: 'HomePage',
       component: HomePage,
       children:[{
            path: '/MenuClickShowPage1', // 配置子项  表示子项路由显示位置是父组件下的 router-view区域
            name: 'MenuClickShowPage1',
            component: MenuClickShowPage1,
       }]
    },
    {
       path: '/ErrorPage',
       name: 'ErrorPage',
       component: ErrorPage
    },
 ]
})

在这里需要注意三点

引入定义的组件
配置访问路径
绑定引入组件

配置路由页面位置
在内容区使用<router-view>标签。

<template>
    <!-- 内容区 -->
    <div class="content">
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "ContentHtml"
    }
</script>

3.菜单按钮配置链接地址属性
使用<router-link>标签，同时配置to属性表示路由地址（与index.js中配置名称对应）。

<router-link to="MenuClickShowPage1">菜单1</router-link>

补充

名称路由（匹配index.js中name属性）

<router-link :to="{ name: 'MenuClickShowPage1', params: { userId: 1111}}">菜单1</router-link>
//接收参数
this.$route.params.userId

传递参数在路由页面刷新后，会自动失效。

查询路由（匹配index.js中path属性）

<router-link :to="{ path: '/MenuClickShowPage1', query: { userId: 1111}}">菜单1</router-link>
//接收参数
this.$route.query.userId

传递参数在路由页面刷新后数据不会自动失效。

在经过上述三个步骤后，菜单路由功能已经可以正常使用。

编程式路由导航配置

场景描述：

向服务器发起一次请求成功后跳转到成功页面，失败则跳转失败页面。

//模拟发起请求后接受返回状态
var state = response.data.code; //假设code为true或者false
//判断状态成功或者失败
if(state){
     //跳转成功页面，同时传递成功消息
     this.$router.push({ path: '/Success', query: { Message:  response.data.message }});
}else{
     //跳转失败页面，同时传递失败消息
     this.$router.push({ path: '/Error', query: { Message:  response.data.message }});
}

补充：

无参数请求：

this.$router.push("Home"); //返回首页  无参数跳转,直接使用push方式。

简单易用，适用于无参数情况。

名称路由（匹配index.js中name属性）

this.$router.push({ name: 'Success', params: { Message: "操作成功" }})
//路由页面接收传递参数   注意：一定要是params
{{this.$route.params.Message}}

可携带参数，但是需要注意名称路由携带参数，在路由页面刷新后数据会自动失效。

查询参数（匹配index.js中path属性）

 this.$router.push({ path: '/Error', query: { Message: "操作失败" }});
//路由页面接收传递参数   注意：一定要是query
{{this.$route.query.Message}}

可携带参数，在路由页面刷新后数据不会自动失效。

嵌套路由

场景：
在ContentHtml中有MenuClickShowPage1页面存在一个左侧选择菜单，要根据菜单进行路由跳转，同时显示在ContentHtml右侧位置。这时就需要用到嵌套路由。
需要两个步骤

在ContentHtml内定义路由区域

<template>
      <div class="contentLeft">
            <router-link :to="{ name: 'showRightPage1', params: { userId: 1111}}">菜单1</router-link>
            <router-link :to="{ name: 'showRightPage2', params: { userId: 1111}}">菜单2</router-link>
      </div>
      <div class="contentRight">
              <!-- 定义路由区域 -->
              <router-view></router-view>
      </div>
</template>

配置index.js路由文件

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/common/Login'  //引入定义的组件
import HomePage from '../components/common/HomePage'
import ErrorPage from '../components/common/ErrorPage'
import MenuClickShowPage1 from '../components/page/MenuClickShowPage1'
import showRightPage1 from '../components/page/rightPage/showRightPage1'
import showRightPage2 from '../components/page/rightPage/showRightPage2'

export default new Router({
  routes: [
    {
      path: '/',    //配置访问路径
      name: 'Login',  
      component: Login  //绑定组件
    },
    {
       path: '/HomePage',
       name: 'HomePage',
       component: HomePage,
       children:[{
            path: '/MenuClickShowPage1', // 配置子项  表示子项路由显示位置是父组件下的 router-view区域
            name: 'MenuClickShowPage1',
            component: MenuClickShowPage1,
            children:[{
                  {
                      path: '/showRightPage1',
                      name: showRightPage1,  
                      component: showRightPage1
                  },
                  {
                      path: '/showRightPage2',
                      name: showRightPage2,
                      component: showRightPage2
                  },
            }]
       }]
    },
    {
       path: '/ErrorPage',
       name: 'ErrorPage',
       component: ErrorPage
    },
 ]
})