vue--vue Router

vue Router----------完成前端页面跳转功能
参考：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

搜索是否有这个包：

npm install vue-router --save-dev

下载报错，换成：

cnpm install vue-router --save-dev

vue-router路由跳转页面展示-代码演示

创建路由包router

一、各个组件代码：

main.vue主页：

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

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

<style scoped>

</style>

2、content.vue 内容：

<template>
  <h1>内容页</h1>
</template>

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

<!--scoped作用域 加了表示只在当前模板下-->
<style scoped>

</style>

3、kuang.vue 自定义

<template>
  <h1>李白</h1>
</template>

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

<style scoped>

</style>

二、 创建路由配置js：index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Content from "../components/Content";
import Main from "../components/Main";
import Kuang from "../components/Kuang";

//安装路由
Vue.use(VueRouter);

//这里new的就是上面引入的vue-router的名字，和Vue类似
export default new VueRouter({
  routes: [
    {
    //  路由路劲
      path: '/content',
      name: 'content',
    //  跳转的组件
      component: Content
    },
    {
      //  路由路劲
      path: '/main',
      name: 'main',
      //  跳转的组件
      component: Main
    },
    {
      //  路由路劲
      path: '/kuang',
      //  跳转的组件
      component: Kuang
    }
  ]

});

分析：

1、安装路由：

1、引入路由包
import VueRouter from ‘vue-router’
2、安装路由
//安装路由
Vue.use(VueRouter);

2、配置要跳转的组件

1、导入写好的组件：
import Content from “…/components/Content”;
import Main from “…/components/Main”;
import Kuang from “…/components/Kuang”;

2、配置组件的路由规则
要在路由类里面的routes属性配置

path: ‘这里配置页面访问路劲’
component: 这里配置要跳转的组件
代码：

//这里new的就是上面引入的vue-router的名字，和Vue类似
export default new VueRouter({
  routes: [
    {
    //  路由路劲
      path: '/content',
      name: 'content',
    //  跳转的组件
      component: Content
    },
    {
      //  路由路劲
      path: '/main',
      name: 'main',
      //  跳转的组件
      component: Main
    },
    {
      //  路由路劲
      path: '/kuang',
      //  跳转的组件
      component: Kuang
    }
  ]

});

三、在入口main.js里面引入路由js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'//自动扫描router包下的index.js里面的路由配置(默认)


Vue.config.productionTip = false




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

分析：
1、直接映入路由包会自动扫描router包下的index.js里面的路由配置，而将它引入进来(默认)
import router from ‘./router’
2、在vue对象中添加引入的router属性

四、App.vue 入口组件中使用路由

<template>
<div id="app">
<!--  这些都要在id="app"的里面，才会有下面的style-->
  <h1>Vue-Router</h1>
  <router-link to="/main">首页</router-link>
  <router-link to="/content">内容页</router-link>
  <router-link to="/kuang">李白</router-link>
  <!--  router-view就是要展示组件的地方-->
  <router-view></router-view>
  <!--  点击后会去找main.js,main.js配置了router，然后会去到router包下的index.js里面-->
</div>

</template>

<script>
import Content from "./components/Content";

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>

分析：
1、在id = 'app’的里面，被vue管理
2、者三局是配置路由的路径

<router-link to="/main">首页</router-link>
  <router-link to="/content">内容页</router-link>
  <router-link to="/kuang">李白</router-link>

3、这一句是组件的图片和文字呈现在哪里

  <router-view></router-view>

<div id="app">
<!--  这些都要在id="app"的里面，才会有下面的style-->
  <h1>Vue-Router</h1>
  <router-link to="/main">首页</router-link>
  <router-link to="/content">内容页</router-link>
  <router-link to="/kuang">李白</router-link>
  <!--  router-view就是要展示组件的地方-->
  <router-view></router-view>
  <!--  点击后会去找main.js,main.js配置了router，然后会去到router包下的index.js里面-->
</div>

过程：
点击配置了路由的页面或文字后会去找main.js,main.js配置了router，然后会去到router包下的index.js里面，然后跳转到相对应的组件里面得到组件，然后显示在这个位置：

  <router-view></router-view>