Vue cli + Vue Router构建单页应用

最新推荐文章于 2023-04-20 14:45:22 发布

Huijie Xu

最新推荐文章于 2023-04-20 14:45:22 发布

阅读量165

点赞数

分类专栏： Vue进阶文章标签： vue

本文链接：https://blog.csdn.net/Xu_cipu/article/details/105614486

版权

Vue进阶专栏收录该内容

4 篇文章 0 订阅

订阅专栏

安装vue， @vue/cli，vue-router

npm i @vue/cli -g
npm i vue-router -g

创建项目

vue create my-app

在创建的项目src文件夹中，创建routers.js
内容如下:

import Home from './components/home.vue';
import newPage from './components/newPage.vue'; //自己新建的组件


const routers = [
  {
    path:'/newpage',
    name: 'newPage',
    component: newPage
  },
  {
    path: '/',
    component: Home
  }
]

export default routers

对App.vue修改如下：
使其完全成为承接不同路由的“内容器”，根据路由的不同，显示不同的页面内容，不包含其他任何页面具体内容。(这里我将原来的App.vue中的内容移至上文件中的home.vue，具体静态资源路径也需要按需修改）

<template>
  <div>
    <router-view></router-view><!--必须添加-->
  </div>
</template>

对main.js做如下修改：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'; //引入vue-router
import routers from './routers' //引入routers路由配置文件

Vue.use(VueRouter); //必须

const router = new VueRouter({
  mode: 'history',
  routes: routers
})

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