Vue_Router路由

安装vue-router

cnpm install vue-router --save-dev
在node_modules目录中可以找到 vue-router 说明安装成功了

安装完运行报错因为可能是router版本太高了，先用cnpm install vue-router@3.1.3 --save-dev命令再运行。

创建文件和组件

在src目录下创建router文件夹，在里边创建index.js，Vue运行时会自动扫描router目录下的index.js文件
index.js

//引入依赖包
import Vue from "vue";
import VueRouter from "vue-router";

 //导入组件1 (Main） 
import Main from "../components/Main";

//导入组件2 (Component）
import Component from "../components/Component";

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

//配置导出路由	
export default new VueRouter({
  routes:[
    {
      //路由路径
      path:"/component",
      //路由名字（没有也行）
      name:"component",
      //要跳转的组件
      component:Component
    },
    {
      //路由路径
      path:"/Main",
      name:"Main",
      //要跳转的组件
      component:Main
    },
  ]
})

创建组件1

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

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

<!--scoped的意思是作用域，样式只在本组件生效-->
<style scoped>
</style>

创建组件2

<template>
  <h1>你好</h1>
</template>

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

<style scoped>
</style>

App.vue整合

<template>
  <div id="app">
    <h1>Vue_Router</h1>
    //相当于a标签，引入链接
    <router-link to="Main">首页</router-link>
    <router-link to="component">组件页</router-link>
    //展示模板，没有的话不显示组件模板内容
    <router-view></router-view>
  </div>
</template>

<script>
//引入依赖包
import Vue from "vue"
import VueRouter from "vue-router"
//创建路由
Vue.use(VueRouter)
//导入组件
import Component from './components/Component'
import Main from './components/Main'
//暴露接口
export default {
  name: 'App',
  components: {
    //HelloWorld,
    Component,
    Main
  }
}
</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>

实施

mian.js程序主入口
在vue实例中配置路由只需要一句 router
import router from “./router”; //导入router，默认扫描次目录下的index文件

//引入依赖
import Vue from 'vue'
import App from './App'

import router from "./router";  //默认扫描router文件下的index文件

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

运行

npm run dev

运行报错因为可能是router版本太高了，先用cnpm install vue-router@3.1.3 --save-dev命令再运行。

终止

ctrl+c

总结：

创建一个目录，在目录中创建Vue组件，在templete模板中编辑内容，之后在创建好的router目录下的index.js文件中引入相关依赖，导入创建好的Vue组件，安装路由 Vue.use(VueRouter) 然后显式暴露一个VueRouter接口

export default new VueRouter({
  routes:[
    {
      //路由路径
      path:"/component",
      //路由名字（没有也行）
      name:"component",
      //要跳转的组件
      component:Component
    }

然后再由Vue.app整合内容

<!--模板-->
<template>
  <div id="app">
    <h1>Vue_Router</h1>
    //相当于a标签，引入链接
    <router-link to="Main">首页</router-link>
    <router-link to="component">组件页</router-link>
    //展示模板，没有的话不显示组件模板内容
    <router-view></router-view>
  </div>
</template>

<script>
//引入依赖包
import Vue from "vue"
import VueRouter from "vue-router"
//创建路由
Vue.use(VueRouter)
//导入组件
import Component from './components/Component'
import Main from './components/Main'
//暴露接口
export default {
  name: 'App',
  components: {
    //HelloWorld,
    Component,
    Main
  }
}
</script>

最后配置main.js

**mian.js程序主入口**
*在vue实例中配置路由只需要一句 **router***
*import router from "./router";  //导入router，默认扫描次目录下的index文件*

//引入依赖
import Vue from 'vue'
import App from './App'

import router from "./router";  //默认扫描router文件下的index文件

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

ok!