vue路由

路由

 

router-link	to='/home'  tag='button'  replace
router-view	渲染路由页面
$route	谁处于活跃状态就是谁
$router	整个大的路由对象

配置路由，在router/router.js下配置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      redirect: 'home',
      component: () => import('@/views/index/Index'),
      children: [
        {
          path: 'home',
          name: 'home',
          component: () => import("@/views/home/Home")
        },
        {
          path: 'news',
          name: 'news',
          component: () => import("@/views/news/News")
        },
        {
          path: 'comment',
          name: 'comment',
          component: () => import("@/views/comment/Comment")
        },
        {
          path: 'introduce',
          name: 'introduce',
          component: () => import("@/views/introduce/Introduce")
        },
        {
          path: 'contact',
          name: 'contact',
          component: () => import("@/views/contact/Contact")
        },

      ]
    },
    {
      path: "/admin",
      name: 'admin',
      component: () => import("@/views/admin/Admin"),
      redirect: '/admin/login',
      children: [
        {
          path: "login",
          name: 'login',
          component: () => import("@/views/login/Login")
        },
        {
          path: 'platformIndex',
          name: 'platformIndex',
          component: () => import("@/views/admin/platform/PlatformIndex"),
          children: [
            {
              path: 'commentManage',
              name: 'commentManage',
              component: () => import("@/views/admin/platform/CommentManage")
            },
            {
              path: 'chatRoom',
              name: 'chatRoom',
              component:  () => import("@/views/admin/platform/ChatRoom")
            },
            {
              path: 'imgManage',
              name: 'imgManage',
              component: () => import("@/views/admin/platform/imgManage"),
              redirect:'carouselImg',
              children: [
                {
                  path: 'carouselImg',
                  name: 'carouselImg',
                  component: () => import("@/views/admin/platform/CarouselImg"),
                }
              ]
            }
          ]
        }
      ]
    }
  ]
})

点击按钮到达指定路由

 searchInfo() {

      this.$router.push("/institutionalPlatform");

    },

replace跟push的区别是 前者没有返回的地址，后者有返回的地址

子路由

子路由跳转 （url变化但是页面没变化） ！！！！！！！！！！！！！！！！！
一定是父路由没有加 <router-view/>

{
      path: '/team',
      name: 'team',
      component: Team,
      children: [{
          path: '',
          name: 'teamManage',
          component: TeamManage
        },
        {
          path: 'searchLecturerInfo',
          name: 'searchLecturerInfo',
          component: SearchLecturerInfo
        },
      ]
    }, 

跳转到子模块  

searchLecturerInfo() {

      this.$router.push("/team/searchLecturerInfo");

    },

路由传递参数

第一种

取别人给User传递的参数

别人调用这个路由

第二种

到Profile并且传参数

取别人给Profile传递的参数

=================方法中路由跳转  刚才两个对应如下===================

 三级路由设置

{
    path: '/setClass',
    name: 'SetClass',
    component: SetClass,
    redirect: 'setClass/home',
    children: [
      // 首页
      {
        path: 'home',
        name: 'Home',
        component: Home,
        redirect: 'home/homeContent',
        meta: {
          title: 'home'
        },
        children: [
          {
            path: 'homeContent',
            name: 'HomeContent',
            component: HomeContent,
            meta: {
              title: 'home'
            }
          },
          {
            path: 'orderDetail',
            name: 'OrderDetail',
            component: OrderDetail,
            meta: {
              title: 'home'
            }
          },
          {
            path: 'watchDataAnalysis',
            name: 'WatchDataAnalysis',
            component: WatchDataAnalysis,
            meta: {
              title: 'home'
            }
          }
        ]
      },

push:添加一个路径(orderDetail)，原来是setClass/home/homeContent 

则变成 setClass/home/orderDetail

路由开启新页面

 let routeUrl = this.$router.resolve({

            path: '/setClass/instructorPlatform/home'

          })

          window.open(routeUrl.href, '_blank')