vue.js — 新建一个 vue 页面并调整路由 Vue

vue.js — 新建一个 vue 页面并调整路由

今天总结一下如何在一个项目中新创建一个页面并给这个页面添加路由：
前提条件：已有一个全新的项目、 VS code编辑器、项目中已加载 vue-touter
1. 进入到项目文件夹目录，并新建两个个 vue 页面：NewsList.vue、Home.vue

文章图片

NewsList.vue 代码

Home.vue 代码

2.创建并映射路由 js 页面:index.js
index.js 代码

import Vue from 'vue' import Router from 'vue-router' import NewsList from '../components/news/NewsList.vue' import Home from '../components/tabbar/Home.vue' Vue.use(Router)export default new Router({ routes: [ { path: '/', redirect: 'Home',//重定向：当路由为 / 界面时跳转到 Home 界面 }, { path: '/Home', name: 'Home', component: Home }, { path: '/NewsList', name: 'NewsList', component: NewsList } ] })

3.修改 App.vue 页面内容：添加 router-view、router-link 标签
App.vue 代码

> > #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; }

4.启动项目