Vue2中路由的使用

在src下新建route文件夹内建立index.js

在index.js中

在srx下pages文件夹专门存放路由组件

// 引入Vue
import Vue from 'vue'
// 引入路由
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter)

//引入路由组件
import Teacher from '@/pages/Teacher'
import Student from '@/pages/Student'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

 然后配置router

routes数组下第一个对象为一级路由

如果需要嵌套在对应的路由组件中继续配置路由规则如下图所示

这里我创建了三级路由(路由嵌套)

// 创建并暴露一个路由
export default new VueRouter({
    routes:[
        {
            path:'/Teacher',
            component: Teacher
        },
        {
            name:'xuesheng',
            path: '/Student',
            component: Student,
            children:[
                {
                    path: 'News',
                    component: News,
                    children:[
                        {
                            name:'xiangqing',
                            path:'Detail',
                            component: Detail
                        }
                    ]
                },
                {
                    path: 'Message',
                    component: Message
                },
            ]
        }
    ]
})

path:'路径'

component:路由组件

name:'路由组件的名称'

嵌套需要配置新的属性children

---

在App.vue组件中 

<template>
  <div class="title">
    <Banner />
    <router-link active-class="active" :to="{name:'xuesheng'}">学生</router-link>
    <router-link active-class="active" to="/Teacher">教师</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Banner from "./components/Banner.vue"

export default {
  components:{ Banner },
  name: 'App'
}
</script>

<style scoped>
.active {
  background-color: tomato;
}
</style>

 路由跳转有两种写法

to:'/Teacher'  跳转配置好的路由规则去Teacher.vue组件中

:to:'{name:'xuesheng'}'    name即为路由组件名称,

---

这里拿一个例子说明,

在Students.vue组件中

<template>
  <div>
    <h1>学生About</h1>
    <router-link active-class="active" to="/Student/News">新闻</router-link>
    <router-link active-class="active" to="/Student/Message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'Student'
}
</script>

<style scoped>
.active {
  background-color: tomato;
}
</style>

 通过路径跳转to 跳转到Student下的子组件News.vue中

---

在News.vue中

<template>
  <div>
    <h1>News新闻页</h1>
    <ul>
      <li v-for="item in msgList" :key="item.id">
        <!-- 通过路由跳转并携带query参数,to字符串写法 -->
        <!-- <router-link :to="`/Student/News/Detail?id=${item.id}&title=${item.msg}`">{{item.msg}}</router-link> -->
        <!-- 通过路由跳转并携带query参数,to对象写法 -->
        <router-link :to="{
          name:'xiangqing',
          query:{
            id:item.id,
            title:item.msg
          }
        }">
          {{item.msg}}
        </router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'News',
  data() {
    return {
      msgList:[
        {id:1,msg:'消息1'},
        {id:2,msg:'消息2'},
        {id:3,msg:'消息3'}
      ]
    }
  },
}
</script>

<style>
</style>

 通过路由query带参数跳转

两种写法

直接拼接在路径后,也可以写为对象方式通过query属性带参数

---

在详情页.即为Detail.vue中

<template>
  <div>
    <h2>消息详情页展示</h2>
    <ul>
      <li>
        {{ this.$route.query.id }}--{{ this.$route.query.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  mounted() {
    console.log(this.$route.query)
  }
}
</script>

<style>
</style>

 通过this.$route.query 查询到携带过来的参数

本内容仅供学习参考使用