Vue-在vue中如何使用vue-router
原创
- 安装
cnpm install vue-router- 配置
scr目录下新增router文件夹,然后新增index.js文件
目录结构
index.js内容如下:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
//首页
import Home from '../components/home/Home'
import Index from '../components/home/Index'
Vue.use(Router)
export default new Router({
routes: [
// 首页模块
{
path: '/', component: resolve => {require(['../components/home/Home'], resolve)},
children: [
{path: '/', name: 'index', component: resolve => {require(['../components/home/Index'], resolve)},},
{path: 'product1', name: 'product1', component: resolve => {require(['../components/home/Product1'], resolve)},},
{path: 'product2', name: 'product2', component: resolve => {require(['../components/home/Product2'], resolve)},},
{path: 'contact', name: 'contact', component: resolve => {require(['../components/home/Contact'], resolve)},},
// 登录模块
{path: 'signin', name: 'signin', component: resolve => {require(['../components/sign/Signin'], resolve)},},
{path: 'signup', name: 'signup', component: resolve => {require(['../components/sign/Signup'], resolve)},},
{path: 'forgetpwd', name: 'forgetpwd', component: resolve => {require(['../components/sign/ForgetPwd'], resolve)},},
{path: 'resetpwd', name: 'resetpwd', component: resolve => {require(['../components/sign/ResetPwd'], resolve)},}
]
}
]
});其中首页和index组件使用了import形式，登陆模块等使用了懒加载的形式，这两种区别是什么呢？懒加载，顾名思义，在需要用到的时候才加载。如果全部使用import形式，vue编译后编译全部组件，导致生成的vendor.js体积过大，从而进入网站首页时会很慢。因此通过懒加载的模式可以提高首页的加载速度，当然提高首页加载速度不止这个方法。
index.js中可以看出，路由routes由一个个路由对象组成，这个路由对象可以嵌套子路由，子路由对象加到children属性中。如果要进入子组件中，父组件的path加上子组件的path就是子组件的url了。
路由对象的name表示这个路由的名称，componet是对应的组件。我们还可以在路由对象中假如一些元数据，在上述代码中未展示
- 引入
在上述步骤中，如果我们要新增路由结构，可以直接修改index.js中的路由表。现在需要在main.js中引入
import router from './router'
new Vue({
el: '#app',
router,
i18n,
store,
components: { App },
template: '<App/>'
})- 使用
最终我们在页面上怎么使用这些路由来实现页面跳转呢
在页面上：home组件
<template>
<div id="home">
<el-container>
<!--导航区-->
<el-header>
<el-menu mode="horizontal" router :default-active="workManage">
<el-row>
<el-col :span="3">
<el-menu-item index="/">{{$t("menuName.home")}}</el-menu-item>
</el-col>
<el-col :span="3">
<el-menu-item index="/product1">{{$t("menuName.product1")}}</el-menu-item>
</el-col>
<el-col :span="3">
<el-menu-item index="/product2">{{$t("menuName.product2")}}</el-menu-item>
</el-col>
<el-col :span="3">
<el-menu-item index="/contact">{{$t("menuName.contact")}}</el-menu-item>
</el-col>
<el-col :span="3" :offset="6">
<el-select v-model="langValue" @change="toggleLang" size="mini" style="margin-top: 16px;width:100px;">
<el-option v-for="item in LangOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="1">
<el-menu-item index="/signin">{{$t("menuName.signin")}}</el-menu-item>
</el-col>
<el-col :span="1">
<el-menu-item index="/signup">{{$t("menuName.signup")}}</el-menu-item>
</el-col>
</el-row>
</el-menu>
</el-header>
<!--主内容区-->
<el-main>
<transition name="fade">
<router-view/>
</transition>
</el-main>
</el-container>
</div>
</template>在导航区定义了菜单，每个菜单的index指向的是路由表的path属性。主内容区<router-view/>就是要展示的子组件，也就是父组件会根据路由动态切换子组件。
通过点击这些菜单，我们就会实现跳转页面
编程式跳转
this.$router.push({path: '/signup'});通过上段代码，我们就可以在代码中实现页面跳转了。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读