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

NewsList.vue 代码

<template>
   <div>
       这是新闻页
   </div>
</template>

Home.vue 代码

<template>
   <div>
       这是 Home 页面
   </div>
</template>

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 代码

<template>
<div id="app">
  <router-link to ="/Home">
  主页
  </router-link>
  <router-link to ="/NewsList">
  新闻页
  </router-link>
  <router-view></router-view>
</div>
</template>

<script>
</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>

4.启动项目

npm run dev

当浏览器下方出现以下状态时按下 Ctrl 键并点击链接 ：http://localhost:8080

5. 路由改造成功
页面切换到浏览器，通过点击页面中的 主页 新闻页 检验路由是否正常跳转