文章目录
Vue Router
我们之前在Vue学了：
视图层——页面元素显示（template，slot，指令）；数据（data）；监听（el，v-on指令，methods）
Vue遵守关注度分离原则，所以只关注视图层！
前后端交互——Axios
项目脚手架——vue-cli
打包工具——webpack
有了这些，我们的前端页面仍然是单页面。因为页面都是vue组件写的，页面间的跳转没有东西实现，所以就出来了vue router路由进行页面跳转！。并且有了vue组件后，拼接显示也需要路由实现。
Vue Router做的就是类似于后端 @RequestMapping的工作！
Vue Router的作用：
- 用于vue组件间跳转（就是页面跳转）使用【< router-link to="/content" >< /router-link >】
- 用于vue组件中子组件的显示。使用【< router-view >< /router-view >】
- 作了类似于 @RequestMapping 的工作
其包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于Vue.js过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的CSS class 的链接
- HTML5历史模式或hash模式，在IE9中自动降级
- 自定义的滚动条行为
安装vue router
vue-router 是一个插件包，所以我们还是需要使用cpm、cnpm来进行安装。打开命令行工具，进入你的项目目录，输入下面命令。
npm install vue-router --save-dev
这样就将 vue-router 安装到了项目中的【node_modules】中了。所以我们可以看出每次项目都要安装一次
定义两个组件
自定义两个个组件Content.vue、Home.vue 实现这两个页面的跳转
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
<template>
<h1>Home</h1>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped>
</style>
配置路由
这里的index只是router的入口脚本，每个插件都要写一个入口脚本。只是这么叫的，要区分开和index.html的区别！
import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from '../components/Content'
import Home from '../components/Home'
// 安装路由
Vue.use(VueRouter);
Vue.use(Home)
// 配置导出路由
export default new VueRouter({
// 配置两个路由
routes: [
// 一个路由，用于跳转到content组件
{
// 路由的路径, 通过路由的访问路径跳转到相应的组件
path: '/content',
name: 'content',
// 跳转的组件
component: Content
},
// 另一个路由用于跳到home组件
{
path: '/home',
name: 'home',
component: Home
}
]
})
导入路由
将路由导入 main.js 因为程序的入口文件时它，导入它才能使用
import Vue from 'vue'
import App from './App'
import router from './router' //不用具体到index，因为index是作为它约定的入口文件。所以写成这样它会自动扫描里面的路由配置
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
// 配置路由，把路由放进入就会自动配置路由
router,
components: {
App },
template: '<App/>'
})
使用路由
<template>
<div id="app">
<!--使用link进行请求跳转-->
<router-link to="/home">首页</router-link>
<router-link to="/content">内容页</router-link>
<!--使用view进行显示，否则跳转的组件不会显示-->
<router-view></router-view>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
import Content from './components/Content'
export default {
name: 'App',
components: {
HelloWorld,
Content
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
自定义一个vue组件（使用vue文件）
Content.vue
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
在另一个组件 App.vue 中引用
<template>
<div>
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
import Content from './components/Content'
export default {
name: 'App',
components: {
HelloWorld,
Content
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Vue练习
使用ElementUI进行前端项目练习。
要install的这些东西如果之前没有放在npm环境中，就要重新进行下载。如果之前下载过了，使用命令会直接将下载在npm环境中的插件安装到项目中！
-
重新按照之前通过 vue-cli 构建一个vue的webpack项目
-
安装各种插件（要先进入项目目录）
# 安装 vue-router npm install vue-router --save-dev # 安装 element-ui npm i element-ui -S # 安装所有的依赖 npm install # 安装 SASS 加载器，在这里安装的是两个东西 cnpm install sass-loader node-sass --save-dev # 启动程序测试 npm run dev
vue项目的目录结构：（这只是一部分，其余部分都会生成）
-
src：源文件
- App.vue：主组件，用于外部 index.html 中使用
- assets：存放图片
- components：存放行为组件
- views：存放视图组件
- router：存放路由
- main.js：程序的主入口，打包时从这里进入。
-
static：静态资源（例如Layui等框架）
写代码
文件以及结构如图
Login.vue
使用的是ElementUI中的表单
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
<style lang="scss" scoped>
.login-box{
border: 1px solid #DCDFE6;
width: 350px;
margin:180px auto;
padding:35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow:0 0 25px #909399;
}
.login-title{
text-align:center;
margin:0 auto 40px auto;
color:#303133;
}
</style>
Main.vue
<template>
<h1>主页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
index.js（注册路由）
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: '/login',
component: Login
},
{
path: '/main',
component: Main
}
]
})
main.js（使用路由与ElementUI）
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(router);
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
App.vue（主组件）
<template>
<div id="app">
<router-link to="/login">login</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
路由传递参数（三步）
之前我们使用路由进行组件跳转并没有传递参数。但在实际开发中我们的链接可能是需要传递参数的，所以有了路由传递参数的实现方法。
之前我们路由进行组件跳转用的是如下标签：
<router-link to="/main"></router-link>
- 在这个跳转的标签中还可以添加参数，例如：
<!--name中找到是组件-->
<router-link v-bind:to="{name:'Main', params:{id:1, name:'xxx'}}"></router-link>
类似于Restful风格，除了在使用时添加参数外还需要再@RequestMapping中添加参数！
- 所以要在路由中定义接收参数的信息！
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: '/login',
component: Login
},
{
path: '/main/:id/:name',
component: Main
}
]
})
-
使用参数，显示
注意 template 中只能放标签。不像html可以放一些字符啥的
<template>
<h1>主页{
{$router.params.id}}</h1>
<!--此处代码用于显示，从路由中取出-->
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>