Article Directory
Router view
What we learned before in Vue:
View layer-page element display (template, slot, instructions); data (data); monitoring (el, v-on instructions, methods)
Vue adheres to the principle of separation of concerns, so it only focuses on the view layer!
Front-end interaction-Axios
Project scaffolding-vue-cli
Packaging tool-webpack
With these, our front-end page is still a single page. Because the pages are written by vue components, there is nothing to realize the jump between the pages, so the vue router route comes out to jump the page! . And with the vue component, splicing display also needs to be implemented by routing.
What Vue Router does is similar to the work of the backend @RequestMapping!
The role of Vue Router:
- Used to jump between vue components (that is, page jump) using [< router-link to="/content" >< /router-link >]
- Used for the display of sub-components in vue components. Use [< router-view >< /router-view >]
- Did a job similar to @RequestMapping
The functions included are:
- Nested routing/view table
- Modular, component-based routing configuration
- Routing parameters, queries, wildcards
- View transition effect based on Vue.js transition system
- Fine-grained navigation control
- Link with automatically activated CSS class
- HTML5 history mode or hash mode, automatically downgraded in IE9
- Custom scroll bar behavior
Install vue router
vue-router is a plug-in package, so we still need to use cpm and cnpm to install it. Open the command line tool, enter your project directory, and enter the following command.
npm install vue-router --save-dev
This will install vue-router into the [node_modules] in the project. So we can see that every project has to be installed once
Define two components
Customize two components Content.vue and Home.vue to realize the jump of these two pages
<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>
Configure routing
The index here is just the entry script of the router, and each plug-in must write an entry script. It's just so called, to distinguish the difference from 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
}
]
})
Import routing
Import the route into main.js because it is the entry file of the program, import it to use
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/>'
})
Use routing
<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>
Customize a vue component (using vue file)
Content.vue
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
Reference in another component 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 exercises
Use ElementUI for front-end project exercises.
If these things to be installed have not been placed in the npm environment before, they must be downloaded again. If you have downloaded it before, using the command will directly install the plug-in downloaded in the npm environment into the project!
-
Re-build a vue webpack project through vue-cli before
-
Install various plug-ins (you must first enter the project directory)
# 安装 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
The directory structure of the vue project: (this is only a part, the rest will be generated)
-
src: source file
- App.vue: Main component, used in external index.html
- assets: store pictures
- components: store behavior components
- views: store view components
- router: store routing
- main.js: The main entrance of the program, enter from here when packaging.
-
static: static resources (such as frameworks such as Layui)
write the code
The file and structure are shown in the figure
Login.vue
The form in ElementUI is used
<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 (registered route)
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 (using routing and 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 (main component)
<template>
<div id="app">
<router-link to="/login">login</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
Routing parameters (three steps)
Before we used routing for component jump and did not pass parameters. But in actual development, our link may need to pass parameters, so there is a way to implement routing parameters.
Previously, we used the following tags for component jumps in routing:
<router-link to="/main"></router-link>
- You can also add parameters in this jump tag, for example:
<!--name中找到是组件-->
<router-link v-bind:to="{name:'Main', params:{id:1, name:'xxx'}}"></router-link>
Similar to Restful style, in addition to adding parameters when using it, you also need to add parameters in @RequestMapping!
- So define the information of receiving parameters in the route!
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
}
]
})
-
Use parameters, display
Note that only labels can be placed in the template. Unlike html, you can put some characters or something
<template>
<h1>主页{
{$router.params.id}}</h1>
<!--此处代码用于显示，从路由中取出-->
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>