VUE进阶篇Part11（vue-route和前端状态管理）---上

此章节内容包括：
1、路由的基本用法
2、路由的跳转（网页上点击链接跳转到另一个网页）
3、通过路由去传递参数

1、前端路由的基本用法

此章节一定要先看前面写的Part10（vue-cli搭建脚手架）或者用过vue-cli的再看，不然可能会的有点蒙

什么是路由？

----通俗的来讲，其实就是网址。

比如 http://www.baidu.com/111 ，这个后缀 /111 的网址无论能否显示出来都是一个网址，这就是一个路由，访问不同的路由，就会加载不同的组件。

用一个例子去理解用法：

需求：使用npm run dev 后打开localhost:8080，在网址后面输入/hello才显示文字内容，即 localhost:8080/hello

1.1、安装（在项目目录下）

npm install --save vue-router

1.2、引用

在搭建vue-cli中默认创建的my-project中的main.js中引用

import Vue from 'vue'
import App from './App'
//1.先装好router
import router from 'vue-router'
//这里的HelloWorld是一个组件，在components文件下，所以这样引入
import HelloWorld from './components/HelloWorld'

//2.调用这个router
Vue.use(router)

1.3、调用router

项目中的HelloWorld.vue其实是一个组件，并且代表的内容是这个文字部分

import Vue from 'vue'
import App from './App'
//1.先装好router
import router from 'vue-router'
//这里的HelloWorld对应的是components文件下的HelloWorld组件，所以这样引用
import HelloWorld from './components/HelloWorld'

//2.调用这个router
Vue.use(router)
Vue.config.productionTip = false

//3.配置路由文件，并在vue实例中引入
var rt = new router({
  //这个routes里面可以定义很多个
  routes: [{
    path: '/hello',//指定要跳转的路径
    component: HelloWorld//指定跳转到上面的路径后，渲染出来的组件
  }]
})


/* eslint-disable no-new */
new Vue({
  el: '#app',
  //将上面配置好的router，在这里调用一下
  router: rt,
  components: { App },
  template: '<App/>'
})

1.4、确定视图的加载位置

视图加载需要在App.vue中设置：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--现在页面中引入，这个router-view就代表刚才第三步配置好的router-->
    <router-view></router-view>
  </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>

结果

如果直接输入localhost:8080，显示的页面是：

输入 /hello 后缀后会渲染出文本内容，表示这个路由就设置好了：

2、路由的跳转

路由的跳转，就是指你在一个网页上点击一个链接会跳转的另一个网页去。

实际上那另一个网页也是提前配置好了的，vue检测到你点击了就会自动渲染该网页所写好的组件，这就是路由的跳转。

需求：

初始页面中显示Hello World和Hello Earth，点击那个就跳到以哪个为后缀的网站

实现过程：

1、这里既然需要跳转到两个页面中，那么就需要先配置好两个路由，一个后缀为helloworld，一个后缀为helloearth

在router文件下的index.js中配置

import Vue from 'vue'
import router from 'vue-router'
//这里要先把这两个组件导入进来，这个文件时专门用来放前端路由的
import HelloWorld from '../components/HelloWorld'
import HelloEarth from '../components/HelloEarth'

Vue.use(router)

//export default 表示这个模块的导出
export default new router({
	//这里的router可以定义多个
	routes:[{
		path:'/helloworld',	//指定要跳转的路径，就是网站后缀
		component: HelloWorld	//在这个网页下要渲染出来的组件
	},{
		path:'/helloearth',
		component: HelloEarth
	}]
})
/*
总结：
当引入一个新的路由时要进行的步骤
1、先在components里面定义好组件，比如HelloEarth.vue
2、定义好之后在index.js中引入，需要import一下，并且写好跳转的路径path和跳转的组件名component
3、结束
*/

2、在components文件下写好对应的组件

HelloWorld.vue 已经默认已经写好了所以就不写了

HelloEarth.vue 文件内容

<template>
  <div class="hello">
    <h1>Hello Earth</h1>
    <h2>Essential Links</h2>
    <hr>
  </div>
</template>

<script>
export default {
  name: 'HelloEarth',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped>
</style>

因为需要点击才显示，所以再写一个 list.vue 组件，放在项目入口，就是首页把这两个连接显示出来

list.vue 文件内容

<template>
    <ul>
        <li>
            <!-- 这个router-link 能够实现路由之间的跳转，点哪个就跳到哪个 -->
            <router-link to="/helloworld">HELLO WORLD</router-link>
        </li>
        <li>
            <router-link to="/helloearth">HELLO EARTH</router-link>
        </li>
    </ul>
</template>

<script>
    export default {
        name:'list'
    }
</script>

<style scoped>

</style>

写好之后把 list 放到项目入口 App.vue文件内，记得先 import 导入一下

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <!-- 3、在这里引用list.vue，发挥它的功能 -->
    <list/>
  </div>
</template>

<script>
//项目入口引入组件的三个步骤
//1、在App.vue中导入
import list from './components/list';

export default {
  name: "App",
  //2、在components中引入
  components: {
    list
  }
};
</script>

结果验证：

首页：

点击HELLO WORLD：

点击HELLO EARTH：

以上就实现了网页之中的链接跳转

3、通过路由去传递参数

在实际业务中会经常会有向某些组件传递一些参数，这时候就可以使用路由去传递

具体实现步骤

1、必须在路由器内加入路由的 name 属性
2、必须在path后加 /： + 传递的参数

在 router 下的 index.js 中写

//export default 表示模块的导出
export default new router({
  //这个routes里面可以定义很多个
  routes: [{
    name:'helloworld',
    path: '/helloworld/:worldmsg',//指定要跳转的路径
    component: HelloWorld//指定要跳转的组件
  },{
    name:'helloearth',
    path: '/helloearth/:earthmsg',//指定要跳转的路径
    component: HelloEarth//指定要跳转的组件
  }]
})

3、传递参数和接收参数请看以下的代码
（其中name，和params是固定的，记得前面是 :to，要加冒号）

传递参数: :to="{name:’ ‘,params:{xxx:’ '}}"

在 components 文件下的 list.vue 中写：

<template>
    <ul>
        <li>
            <!-- 这个router-link 能够实现路由之间的跳转，点哪个就跳到哪个 -->
            <router-link :to="{name:'helloworld',params:{worldmsg:'保护世界和平！'}}">HELLO WORLD</router-link>
        </li>
        <li>
            <router-link :to="{name:'helloearth',params:{earthmsg:'保护地球环境！'}}">HELLO EARTH</router-link>
        </li>
    </ul>
</template>

<script>
    export default {
        name:'list'
    }
</script>

<style scoped>

</style>

接受参数 在对应的组件中 $route.params.xxx

HelloWorld.vue 中：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Hello World</h2>
   	<p>{{$route.params.worldmsg}}</p>
  </div>
</template>

HelloEarth.vue 中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Hello World</h2>
   	<p>{{$route.params.earthmsg}}</p>
  </div>
</template>

结果

点击Hello World:

点击Hello Earth: