【轻松学vue】vue.js脚手架（七）路由

路由

项目中使用路由模块，需要下载
使用命令 ：npm install vue-router --save-dev
在src中创建一个文件夹叫router，在router中创建一个index.js文件
写如下配置：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  routes:[]
})

在main.js中增加如下信息

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

路由实现：

app.vue 中增加代码

<router-link to="/HelloWorld">helloworld</router-link>
<router-view></router-view>

router文件夹下index.js中添加代码

import Vue from 'vue'
import Router from 'vue-router'
//导入helloWorld组件，这里的@指的是src目录
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router) 
export default new Router({
  routes:[{
    path:"/HelloWorld",//指定url
    component:HelloWorld //映射组件
  }]
})

去除地址栏路径上的#

export default new Router({
  routes:[{
    path:"/HelloWorld",
    component:HelloWorld
  }],
  mode:"history"
})

QQ：732005030
扫码加微信