路由

1.Vue-rotuer开发（五步法）

 1)新建router目录

  通过npm安装vue-router

  Npm install --save vue-router

  2)在index.js中，导入路由，并且使用Vue.use()安装路由：

 import Vue from 'vue'
 import App from './App'
 import VueRouter from 'vue-router'
 Vue.use(VueRouter);//注册路由

3）配置路由(index.js)：导入路由模板，配置路径信息

import content from "@/components/content.vue"///在vue.use之前

export default new Router({

  routes: [

   {

        path : ‘/’,  //到时候地址栏会显示的路径

        name : ‘Home’,

        component :  Home   // Home是组件的名字，这个路由对应跳转到的组件。。注意component没有加“s”.

    },

    {

        path : ‘/content’,

        name : ‘Content’,

        component :  Content

    }

],

 })

又在main.js中引入router,实例化路由

import Vue from 'vue'
import App from './App'
import router from './router'
var vue=new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
 })

4）<router-link :to=”/home”></router-link>路由入口

配置完成后在对应根实例app.vue中添加路由视图<router-view></router-view>来挂载所有路由组件：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {  }
</script>

路由跳转     

 两种方法：

1.内置<router-link></router-link>组件，它被渲染为<a>标签：

<router-link :to="/about">跳转到about</router-link>

设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。

2.使用router实例的方法，比如在about.vue中通过点击事件跳转：

<template>
          <div>
           <button @click="handleRouter">跳转到user</button>

  </div>

</template>

<script>

export default {

methods:{
handleRouter（）{
       this.$router.push("/user");
  } }
</script>

详细栗子：

1. 在components文件夹下创建两个文件one.vue和two.vue  

<template>
  <div class="one">
  <p>第一个组件</p>
  </div>
</template>

Two.vue同上

1. 在index.js里面导入one.vue和two.vue文件并且安装路由，配置路径信息

import one from '@/components/one'
import two from '@/components/two'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/one',
      name: 'one',
      component: one
    },
    {
      path: '/two',
      name: 'two',
      component: two
    }
  ]
})

2.在main.js中定义路由挂载实例

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

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

 

3.在app.vue里面增添连接router-link，

<template>
  <div id="app">
<router-link to="/one">one</router-link>
<router-link to="/two">two</router-link>
<router-view></router-view>
  </div>
</template>