（四）快速上手VUE 路由功能学习心得
知识点目录
- 摘要
- 前言
- 开始
-
- 1.App.vue
- 2.main.js
- 3.router/index.js
- 4.首页科代表：components/home.vue
- 4.列表科代表：components/nowplaying.vue
- 5.详情页科代表：components/detail.vue
- 路由知识点，手册
- 随堂心得（小白の我の理解）
辅助知识点:
sublime创建vue模板 https://www.jianshu.com/p/54f7a2f9b30d
Sublime模板插件sublimeTmpl使用 https://blog.csdn.net/u011254082/article/details/51669889
摘要
本文主要讲讲通过路由的学习心得，主要的技术知识点我只想留个链接大家自己去看。
通过路由的学习，我真正理解VUE的前端代码管理概念，它好比一家医院的服务流程——有个分诊台，引导你要去哪个科室哪个啥…
我对他们拟人化的理解：
1、.vue文件都是html的管理员：其中作为入口文件的App.vue可以理解为index.html灵魂。它的内容定义着index要生成什么。同时可嵌入路由视图，路由链接，组件等。同理，components里面的.vue文件也可以。
2、main.js是JS插件管理员：管理js插件的。同时，定义入口，渲染页面，毕竟html文件都是js渲染出来的，它管很合适。
3、router文件夹里的index.js乃路由本尊，管理components里的页面门的关系，跳转管理员。
4、components文件夹，医院大楼里的各个大大小小的房间，部门所在地。从app.vue前台进来后，就看你的需求，由路由管理员定关系，谁是首页，列表页，详情页，页面里面还可以相互套页面。so magic，这就像哈利波特的魔法世界。
前言
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
这里是vue文件中的引用。
如果使用全局的script标签，则无须如此（手动安装）。
为了结构更加清晰，因此脚手架就将router放到一个文件夹，并使用引用即可。
当做一个key值传入到 new Vue({…}) 当中，即可发生联系。
开始
基础使用一个路由的用法，涉及的文件如下：
1.App.vue
<template>
<div id="app">
app
<router-view/>
<router-link to="/home">homerouter-link>
<router-link to="/film">filmrouter-link>
<router-link to="/card">cardrouter-link>
div>
template>
<script>
export default {
name: 'App'
}
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>
2.main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import 'at-ui-style'
import AtUI from 'at-ui'
import Axios from 'axios';
Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json';
Vue.config.productionTip = false
Vue.use(AtUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
代码中这三条友是at-ui的样式插件，和接API用的axios插件
import 'at-ui-style'
import AtUI from 'at-ui'
import Axios from 'axios';
3.router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'
import Film from '@/components/film'
import Card from '@/components/card'
import NowPlaying from '@/components/nowplaying'
import Commingsoon from '@/components/commingsoon'
Vue.use(Router)
export default new Router({
routes: [
{
path: "/home",
component: Home
},
{
path:"/film",
component:Film,
// 子路由定义
children:[
{
path:"nowplaying",
component:NowPlaying
},
{
path:"commingsoon",
component:Commingsoon
},
// 子路由重定向
{
path:"/film",
redirect:"/film/nowplaying"
}
]
},
{
path:"/card",
component:Card
},
// 重定向
{
path:"/",
redirect:"/home"
}
]
})
4.首页科代表：components/home.vue
<template>
<div>我是homediv>
template>
<script>
export default {
name: 'home',
data () {
return {
};
}
};
script>
<style lang="scss" scoped>
style>
4.列表科代表：components/nowplaying.vue
说明：本例子是买电影票的系统，nowplaying指正在热播的电影。
<template>
<div>
我是nowplaying页面
<ul>
<li v-for="(data,index) in datalist" @click="handleClick(index)">
{
{data}}
li>
ul>
div>
template>
<script>
//3步.引用上一层的router/inde.js
import router from "../router";
export default {
name: 'nowplaying',
data () {
return {
datalist:["film1","film2"]
};
},
methods: {
handleClick(index) {
// router.push("/detail");
router.push(`/detail/${
index}`);
// router.push("./detail"); 如果是"./"就是film路由下。
}
}
};
script>
<style lang="scss" scoped>
style>
5.详情页科代表：components/detail.vue
<template>
<div>
我是detail页面
--
<p>{
{$route.params.id}}p>
div>
template>
<script>
export default {
name: 'detail',
data () {
return {
};
}
};
script>
<style lang="scss" scoped>
style>
路由知识点，手册
https://router.vuejs.org/zh/guide/
随堂心得（小白の我の理解）
