使用vue-cli创建vue项目并且引入路由模块

使用vue-cli创建vue项目并且引入路由模块

前提条件，需要会使用node.js，并且已经安装好了node.js

使用webpack创建vue项目

vue init webpack <项目名>

vue init webpack vueele-demo7

结果如下图：

安装 vue-router模块

npm install vue-router --save-dev

在src目录下创建router文件夹

在router目录创建index.js，配置路由

引入router：
import VueRouter from 'vue-router'
并且声明使用router：
Vue.use(VueRouter)

import Vue from 'vue'
import VueRouter from 'vue-router'
//引入
import Demofrom '../views/Demo'
Vue.use(VueRouter)
export default new VueRouter({
    routes: [
        {
            path: '/demo',//路由路径
            name: 'Demo',//路由名称
            component: Demo//跳转到的路径
        }
    ]
})

在src目录下创建views目录，并且创建Demo.vue文件

Demo.js文件内容

<template>
  <div>
    <h2>我是DEMO</h2>
    <p>我是Demo内容</p>
  </div>
</template> 
<script>
export default {
  name: "Demo",
};
</script> 
<style>
</style>

在main.js中引入路由模块

在main.js中引入并进行使用
import router from './router'

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

运行项目测试
结果