先看一下目录结构
每个view文件的作用
组件文件HelloWorld.vue，主要封装了可重复使用的组件，我用它来做了一个模板头，主要用于框架页面的头部。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: '这是模板头部'
}
}
}
</script>
Login.vue作为首页，登录页
<template><
divid="login_div">
这是登录页
</div>
</template>
Home.vue页面作为模板页面，上部引入组件HelloWorld，记住import，components，<组件标签>，前两个地方注册后，再使用标签标记使用组件
显示区放入router-view，用于放入显示页
<template>
<div id="Home_div">
这是主页home
<HelloWorld></HelloWorld>
<router-view/>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
export default {
name: 'Home',
components: {
HelloWorld
},
}
</script>
User.vue为嵌入Home的显示页面，这里正常写页面，不用于Home关联，关联在router中配置即可，在设置一个Project.vue用于实现跳转
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-link to="/home">首页</router-link>
<router-link to="/home/project">项目</router-link>
</div>
</template>
<script>
export default {
name: 'User',
data () {
return {
msg: '这是user页面'
}
}
}
router/index.js中配置路由，首页是login，user是home的子路由，mode默认是hash,改成history,就不会出现#号
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Home from '@/views/Home'
import User from '@/views/User'
import Project from '@/views/Project'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'login',
component: Login
},
{
path: '/home',
name: 'home',
component: Home,
children: [
{
path: 'user',
name: 'user',
component: User
},
{
path: 'project',
name: 'project',
component: Project
}]
}
]
})
hash模式url带有#
history模式没有#号
在web目录下启动
npm run dev
浏览器中输入127.0.0.1:8080，出现根目录login页面
主页，login页面，button忽略，上面代码中未写
home页面，“这是模板”是引入了HelloWorld组件，下面是空白的router-view
user页面嵌入在home页面中，并插入两个链接
点击user页面的项目链接，跳转至project页面
vue-router的搭建，测试完成。
启动时会提示eslint格式验证报错，建议先关闭，web目录下config\index.js
注释一下两行，启动后，就能避开eslint检验格式
//useEslint:true,
//showEslintErrorsInOverlay:false,
网友评论