使用vue-cli
快速创建项目
vue init webpack test
Install vue-router? Yes
,其他的选No
- 安装
vue-router
软件包# 安装 vue-router npm install vue-router --save-dev
- 安装项目所需的软件包
npm install
- 新建vue组件
<!--Content.vue--> <template> <h1>内容页</h1> </template> <script> export default { name: "Content" } </script> <style scoped> </style> <!--Home.vue--> <template> <h1>欢迎进入我们的网站!!!</h1> </template> <script> export default { name: "Home" } </script> <style scoped> </style>
- 编写
router/index.js
import Vue from 'vue' // 导入路由软件包 import Router from 'vue-router' // 导入要路由的组件 import Home from '../components/Home' import Content from '../components/Content' // 安装路由 Vue.use(Router); export default new Router({ routes: [ { // 路由路径 path: '/home', name: 'home', // 路由地址(要跳转的组件) component: Home }, { path: '/content', name: 'content', component: Content } ] })
- 在
main.js
中导入`编写的路由配置import Vue from 'vue' import App from './App' // 导入路由配置,如果配置名为index.js可以只写包名 import router from './router' Vue.config.productionTip = false; new Vue({ el: '#app', // 使用路由 router, components: { App }, template: '<App/>' });
- 在
App.vue
添加路由标签<template> <div id="app"> <h1>test</h1> <router-link to="/home">首页</router-link> <router-link to="/content">内容</router-link> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
- 启动项目
npm run dev
项目结构