vue路由，二级路由及跳转

Posted 2023-04-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue路由，二级路由及跳转相关的知识，希望对你有一定的参考价值。

参考技术A ★router文件下的index.js文件：

/* 导入Vue构造函数 */

import Vue from 'vue'

/* 导入路由VueRouter构造函数 */

import VueRouter from 'vue-router'

/* 导入HomeView页面 */

import HomeView from '../views/HomeView.vue'

//调用构造函数Vue的use方法传入VueRouter构造函数

//作用是把VueRouter作为一个插件全局插入到Vue中

Vue.use(VueRouter)

/* 定义一个路由数组对象 */

const routes = [

/* 一个对象就对应了一个路由

path就是路由的地址

name给路由起的名字

component 具体跳转的页面

*/

/* path: '/' 根页面,表示已进入就显示的页面 */

path: '/',

name: 'home',

/* 这种方式一进入页面就会全部加载,不是用到的时候再加载

性能没有懒加载的方式好 */

component: HomeView,

/* 可以使用redirect 重定向已进入主页就展示第一个子页面

redirect 后面跟的是路径名并不是name */

/* 因为/是根路径所有可以直接写one */

redirect:'one',

children:[

path:'one',

name:'one',

component: () => import('../views/OneView.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'),

/* about不是根路径所以redirect后面要写全 '/about/aboutchild', */

redirect:'/about/aboutchild',

children:[

path:'aboutchild',

name:'aboutchild',

component: () => import('../views/AboutChild.vue')

]

,

path:'/ChildA',

name:'ChildA',

component: () => import('../components/ChildA.vue')

,

/* path:'*' 必须要放最后 */

/* path:'*' 表示上面的路由没有匹配到则进入下面的页面 */

path:'*',

name:'notfound',

component: () => import('../components/NotFound.vue')

]

/* 实例化构造函数 VueRouter 产生一个实例化对象

并把上面的路由数组对象routes当作参数以对象的方式传给构造函数 VueRouter*/

const router = new VueRouter(

routes

)

/* 把实例化路由对象 router默认导出 */

export default router

main.js文件：

/* 导入Vue构造函数 */

import Vue from 'vue'

/* 导入App.vue入口页面 */

import App from './App.vue'

/* 导入router文件夹中的index.js中的router实例化对象 */

/* 一个文件夹里面只有一个index.js文件在脚手架中可以把./router/index.js简写为./router */

import router from './router'

/* 生产提示 */

/* 改成false是用来关闭开发者提示 */

Vue.config.productionTip = false

/* 在Vue的对象参数里面配置 el:"#app" 等于 .$mount('#app')

都是用来挂载到id为#app的div上的*/

/* 把路由实例化对象router配置在Vue中,作用是保证项目中

所有的vue文件都可以使用router路由的属性和方法 */

new Vue(

router,

/* 会把所有vue文件渲染到App组件上 */

render: h => h(App)

).$mount('#app')/* 等同于 el:"#app" */

viwes文件下：

App.vue文件：

<template>

<div id="app">

<nav>



<router-link to="/">Home</router-link> |

<router-link to="/about">About</router-link> |

<router-link to="/ChildA">点我跳转ChildA</router-link> |

<router-link to="/ChildB">点我跳转ChildB</router-link> |

</nav>



<router-view/>



</div>

</template>

<style>

#app

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

nav

padding: 30px;

nav a

font-weight: bold;

color: #2c3e50;

/* .router-link-exact-active 跳转链接被激活的时候加载到router-link身上 */

nav a.router-link-exact-active

color: #42b983;

</style>

AboutView.vue文件：

<template>

<div class="about">

<h1>This is an about page</h1>







<router-link :to="name:'aboutchild'">我是aboutchild</router-link>



<router-view></router-view>

</div>

</template>

AboutChild.vue文件：

<template>

<div>

<h1>AboutChild</h1>

</div>

</template>

<script>

export default

</script>

<style>

</style>

HomeView.vue文件：

<template>

<div class="home">

<h1>KW47冲冲冲</h1>

<router-link to="/one">ONEview</router-link>



<router-view></router-view>

</div>

</template>

<script>

// @ is an alias to /src

export default

name: 'HomeView',

components:

</script>

OneView.vue文件：

<template>

<div>

<h1>我是ONEVIwe</h1>

</div>

</template>

<script>

export default

</script>

<style>

</style>

components文件下：

ChildA.vue文件：

<template>

<div>

<h1>我是CHildA</h1>

</div>

</template>

<script>

export default

</script>

<style>

</style>

ChildB.vue文件：

<template>

<div>

<h1>我是ChildB</h1>

</div>

</template>

<script>

export default

</script>

<style>

</style>

NotFound.vue文件:

<template>

<div>

<h1>我是notfound</h1>

</div>

</template>

<script>

export default

</script>

<style>

</style>

左边文件目录：