vue项目路由配置及两种路由跳转方法

路由

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: ''
 })

4）”/home”>路由入口

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

路由跳转     

 两种方法：

1.内置组件，它被渲染为标签：

跳转到about

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

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

详细栗子：

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

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: ''
})

 

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