Vue Route使用记录

Vue Router

声明式路由导航配置

菜单路由配置

场景描述：

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

1. 配置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
    },
 ]
})

在这里需要注意三点

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

2. 配置路由页面位置
   在内容区使用标签。

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

菜单1

补充

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

菜单1
//接收参数
this.$route.params.userId

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

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

菜单1
//接收参数
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内定义路由区域

• 配置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
    },
 ]
})