vue创建路由项目

vue创建路由项目

1、通过以下指令创建项目

vue create vuerouter(项目名称)

2、cd进入目录

cd vuerouter

3、添加需要的依赖包，比如添加vue路由vue-router依赖包，可以使用 npm install vue-router , 或者 vue add router

npm install vue-router
或者
vue add router

4、安装所有依赖包

cnpm install

5、运行项目，查看package.json文件中的scripts脚本中的运行方式

npm run serve

6、创建路由所需要的文件

npm install --save vue-router

在src/components文件夹中创建自己需要的vue文件，这里我创建的是about.vue和list.vue

List.vue

<template>
  <div id="app">
      <span>这是List页面</span>
  </div>
</template>

About.vue

<templhtmate>
  <div id="app">
      <span>这是about页面</span>
  </div>
</template>

创建路由的index.js文件

import Vue from 'vue'
import Router from 'vue-router'
 
//组件模块
import List from '@/components/list'
import About from '@/components/about'

 
Vue.use(Router)
 
export default new Router({
  routes: [
    { path: '/list', name: 'List', component: List },
    { path: '/about',  name: 'Aabout', component: About},
  ]
})

main.js添加router

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

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

7、最终效果