vue.js — 新建一个 vue 页面并调整路由
vue.js — 新建一个 vue 页面并调整路由今天总结一下如何在一个项目中新创建一个页面并给这个页面添加路由:前提条件:已有一个全新的项目、 VS code编辑器、项目中已加载 vue-touter进入到项目文件夹目录,并新建两个个 vue 页面:NewsList.vue、Home.vueNewsList.vue代码<template><div>...
·
vue.js — 新建一个 vue 页面并调整路由
今天总结一下如何在一个项目中新创建一个页面并给这个页面添加路由:
前提条件:已有一个全新的项目、 VS code编辑器、项目中已加载 vue-touter
1. 进入到项目文件夹目录,并新建两个个 vue 页面:NewsList.vue、Home.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. 路由改造成功
页面切换到浏览器,通过点击页面中的 主页 新闻页 检验路由是否正常跳转
更多推荐
已为社区贡献1条内容
所有评论(0)