之前并不知道vue-cli多用于单页面应用,对于现在的多页面跳转只能用路由来实现,当然我也是初步了解。
要求:登录页面-权限页面-内容页面
对于页面跳转,就不能使用
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
此种有按钮点击进行内容切换效果,而我需要的是点击按钮进入一级级页面,只能动态配置路由了
页面:login.vue ,permission.vue,content.vue
一、app.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
二、index.js(路由配置)
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/login/login.vue'
import Permission from '@/login/permission.vue'
import Home from '@/components/home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',(默认进入登录页面)
name: 'Login',
component: Login
},
{
path: '/permission',
//path: '/permission/:id',以后可以加参数
component:Permission
},
{
path: '/home',
name: 'Home',
component: Home
}
]
})
三、login.vue和permission.vue
<button class="tj" @click=dl>登 录</button>
dl(){
this.$router.push('/permission')
//this.$router.push({ name:'Permission',path: '/permission', params: { id: 2}})以后可加参数
}
permission.vue类似;
具体以后登录页面是否需要这样传参,还不清楚,后续再来修改;