vue路由

1. 安装vue-router

npm i vue-router -s

2.设置vue-router

首先在vue中src文件夹下的sec下创建一个router文件夹下创建一个index.js文件

// src/router/index.js就是当前项目的路由模块
// 1 导入Vue 和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
// 2 调用vue.use()函数，把VueRouter安装为vue插件
Vue.use(VueRouter)
// 3 创建路由的实例对象
const routes = [
  //路由规则
  {
    path: '/',
    component: () => import('../views/Manage.vue'),
    redirect: "/home",//重定向，将/重定向到/home// 路由重定向：强制跳转
    children: [// /组件里的嵌套路由
      { path: 'user', name: '用户管理', component: () => import('../views/User.vue')},
      { path: 'home', name: '首页', component: () => import('../views/Home.vue')},
      { path: 'person', name: '个人信息', component: () => import('../views/Person.vue')}
    ]
  },
  {//登录的路由
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue')
  },
  {//登录的路由
    path: '/register',
    name: 'register',
    component: () => import('../views/Register.vue')
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]
// 定义数组routes[],对应哈希地址与组件之间的关系
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
// 4 向外共享路由的实例对象
export default router

index.js

或者：

// src/router/index.js就是当前项目的路由模块
// 1 导入Vue 和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入路由要用到的组件
import Home from '../components/Home.vue'
import Movie from '../components/Movie.vue'
import About from '../components/About.vue'
 
// 2 调用vue.use()函数，把VueRouter安装为vue插件
Vue.use(VueRouter)

// 3 创建路由的实例对象
const router = new VueRouter({
  // 定义数组routes[],对应哈希地址与组件之间的关系
  routes: [
  //路由规则
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
   {
      path: '/about',
      component: About,
      // about组件里的嵌套路由
      children: [
        { path: 'tab1', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    },
    // 路由重定向：强制跳转
    { path: '/', redirect: '/home' }
  ]
})

// 4 向外共享路由的实例对象
export default router

index.js

然后在main.js中加入

// 1 导入路由模块，拿到路由实例
import router from '../src/router/index.js'

和

new Vue({
  render: h => h(App),
  
  //  2 挂载路由
  router: router
}).$mount('#app')

3.应用

首先知道<router-view/>或者是<router-view></router-view>,这个是一个路由容器，vue项目最核心的App.vue文件中即是通过router-view进行路由管理。

然后这个是一级路由

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

比如说这个项目中的/login和/register,/about都是一级路由

这个一级路由的跳转是：

this.$router.push("要跳转的路径")

比如说这个@click="$router.push('/register')是要跳转到注册中去

然后上面的http://localhost:8080/默认加载的是Manage.vue中的东西

4.子路由

咱们看卡Manage.vue中的东西

这个中间这部分就是二级路由，就是类似这个样子

又或者说类似与微信上的这个样子

这个的代码是这样的：

{
    path: "/routerViewPractice",
    name: "routerViewPractice",
    component: () => import("@/views/routerView/index.vue"),
    redirect: '/messagePage',//页面默认加载的路由
    children: [
      {
        path: "/messagePage",
        name: "messagePage",
        component: () => import("@/views/routerView/childPages/messagePage.vue")
      },
      {
        path: "/contactPage",
        name: "contactPage",
        component: () => import("@/views/routerView/childPages/contactPage.vue")
      },
      {
        path: "/dynamicPage",
        name: "dynamicPage",
        component: () => import("@/views/routerView/childPages/dynamicPage.vue")
      }
    ]
  }

<template>
  <div>
    <title-bar :title="title" @goBack="goback"></title-bar>
    <router-view></router-view>
    <BottomBar
     @handleMsg='handleMsg'
     @lookContact='lookContact'
     @readDynamic='readDynamic'
    ></BottomBar>
  </div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
import BottomBar from "@/components/BottomBar";
export default {
  name: "",
  components: {
    TitleBar,
    BottomBar
  },
  data() {
    return {
      title: "路由视图",
    };
  },
  methods: {
    // 返回方法
    goback() {
      // this.$emit("GoBack");
    },
    handleMsg() {
      this.$router.push({path: '/messagePage'})
    },
    lookContact() {
      this.$router.push({path: '/contactPage'})
    },
    readDynamic() {
      this.$router.push({path: '/dynamicPage'})
    }
  }
};
</script>
<style scoped>
#page-title {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
}
.backImg {
  width: 20px;
}
</style>