Vue-Router路由的使用

学习目标：

Vue-Router路由的使用

---

学习内容：

Vue-Router路由

---

学习时间：

---

学习产出：

Vue-Router路由

1、介绍

Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于Vue.js过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动**的CSS class的链接
• HTML5历史模式或hash模式，在IE9中自动降级
• 自定义的滚动条行为

2、安装

在前面测试vue-cli的项目中进行过测试，控制台输入命令
    npm install vue-router --save-dev

安装完成后去node_modules文件夹下查看是否有vue-router文件夹，有就是下载成功

3、Vue-Router程序

• 1、将myvue项目中的 assert下的logo图片、component定义的helloworld组件

• 2、前端展示组件内容

• （1）在components目录下存放我们自己定义的组件：Content.vue、Main.vue

• Content.vue

<template>
  <h1>童一</h1>
</template>

<script>
export default {
  name: "Content"
}
</script>

<style scoped>

</style>

• Main.vue

<template>
  <div><h1>首页</h1></div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

• （2）、修改App.vue内容
• App.vue

<template>
  <div id="app">
    <h1>你好</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <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>

• 3、js文件控制内容
• （1）、安装路由：创建一个router目录，在目录下新建文件index.js，专门存放路由
• index.js

import Vue from 'vue'

/*导入路由插件*/
import Router from 'vue-router'
/*导入定义的组件*/
import Content from "../components/Content"
import Main from "../components/Main"

/*安装路由*/
Vue.use(Router);

/*配置路由*/
export default new Router({
  routes:[
    {
      /*路由路径：地址有content就会进入这个组件*/
      path:'/content',
      /*路由名字*/
      name:'content',
      /*跳转到组件*/
      component:Content
    },
    {
      path:'/main',
      name:'main',
      component: Main
    }
  ]
});

• （2）、配置路由：修改根目录下main.js
• main.js

import Vue from 'vue'
import App from './App'
import router from './router'/*自动扫描路由配置(会自动寻找index.js)*/

/*关闭生产模式下给出的提示*/
Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

控制台输入npm run dev运行,显示页面则成功