vue 前端路由(对应关系)

前端路由

前端路由就是Hash地址与组件之间的对应关系，路由可以在一个页面中跳转多个页面，首先导入vue-router包，在创建一个router文件夹，文件夹与components文件夹平齐，里面存放的是路由文件。

例如在router文件下存放一个index,js文件，里面是存放的router路由项目

//导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'

//导入Vue.use()的函数，将vueRouter设置为vue插件
Vue.use(VueRouter)

//创建vueRouter的实例对象
const router =new VueRouter()

//导出router
export default router

main.js中引入这个路由文件

import router from '@/router/index.js'
//在模块化导入中，如果再导入文件夹下的文件时，省略了index.js，或者也去掉斜杠，则默认去找文件下的index.js文件
new Vue({
    router: router // 或者直接写成router,因为router都是一样的
}).$mount('#app')

<router-view>占位标签

该标签只能只用于router路由里面，也要导入router包之后才能使用，只有在用户点击关于路由的标签后才会触发，也要引入相关的路由。

例如在App.vue中实现路由跳转。

<template>
  <div id="App">
    <a href="#/home">首页</a>
    <a href="#/move">关于</a>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style></style>

在main.js也要引入相关的router文件，最上面的main.js已经演示。

router文件中的index.js文件写入

//导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'
//导入相关路由需跳转的组件
import Home from '@/components/home.vue'
import Auto from '@/components/auto.vue'

//导入Vue.use()的函数，将vueRouter设置为vue插件
Vue.use(VueRouter)

//创建vueRouter的实例对象
const router = new VueRouter({
    routes: [
        // 配置路由路径，这里的path路径就不需要在前加#，component是要跳转的组件。
        { path: '/home', component: Home },
        { path: '/move', component: Auto }
    ]
})

//导出router
export default router

<router-link>代替a标签

a标签中要使用href="#地址"才能实现路由的跳转，但在官方推荐中，最好使用router-link标签进行跳转，可以不写#，直接写地址。

<template>
  <div id="App">
    <router-link to="/home">首页</router-link>
    <router-link to="/move">关于</router-link>
    <hr />
    <router-view></router-view>
  </div>
</template>

重定向路由规则

重定向路由规则，主要是在进入页面后，直接跳转到哪里，或者在用户点击某个路由链接后，指定跳转到哪里

//导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/home.vue'
import Auto from '@/components/auto.vue'

//导入Vue.use()的函数，将vueRouter设置为vue插件
Vue.use(VueRouter)

//创建vueRouter的实例对象
const router = new VueRouter({
    routes: [
       // 重定向规则，在访问ip地址+端口号的时候，直接跳转到/home路由下
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        { path: '/move', component: Auto }
    ]
})

//导出router
export default router

路由嵌套实现

路由嵌套是指在子组件中再实现一个路由链接。

例如：再根据上面的auto组件中实现一个tab的链接，再app.vue中开始点击auto的路由时，auto中先不会显示auto的子组件路由链接，再点击auto组件中的tab路由则可以路由到tab组件中，路由依然再index.js中设置。

首先再auto组件中写入

<template>
  <div id="App">
    <router-link to="/move/tab">tab首页</router-link>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style></style>

router中index.js写入。

//导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/home.vue'
import Auto from '@/components/auto.vue'
//添加子路由的文件路径
import Tab from '@/components/tab/tab.vue'

//导入Vue.use()的函数，将vueRouter设置为vue插件
Vue.use(VueRouter)

//创建vueRouter的实例对象
const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        { path: '/move',
         component: Auto, 
         children: [
          //子路由规则，可以在path路由路径上不加/
         { path: 'tab', component: Tab }
         ] 
        }
    ]
})

//导出router
export default router

重定向与默认子路由

在index.js中可以在跳转到关于页面时，直接跳转到子路由的tab组件上，一下有两种方法。默认子路由与重定向的区别也有，默认子路由如果再点击关于链接中的tab路由时，直接显示整个关于组件显示空。

//导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/home.vue'
import Auto from '@/components/auto.vue'
//添加子路由的文件路径
import Tab from '@/components/tab/tab.vue'

//导入Vue.use()的函数，将vueRouter设置为vue插件
Vue.use(VueRouter)

//创建vueRouter的实例对象
const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        { path: '/move',
         component: Auto, 
         //第一种方法是重定向
         //redirect: '/move/tab'
         children: [
          //子路由规则，可以在path路由路径上不加/
          //第二种方法是将默认子路由的path设置为空即可，他会直接跳转到这个路由上
         { path: '', component: Tab }
         ] 
        }
    ]
})

//导出router
export default router