（四）快速上手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">home</router-link>
    <router-link to="/film">film</router-link>
    <router-link to="/card">card</router-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>我是home</div>
</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页面
		--
		<!-- 动态路由匹配 -->
		<!-- 前面 “$route.params.” 是固定的 -->
		<!-- 后面的 id，是根据定义的 占位符 对应定义 -->
		<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/

随堂心得（小白の我の理解）