Vue.js中设置单独步骤详解yarn在Vue中设置单独页面的非常简单

Vue.js中设置单独页面的步骤详解

一、安装Vue Router插件

你需要在项目中安装Vue Router插件。可以通过npm或yarn来安装：

npm install vue-router

yarn add vue-router

安装完成后，在项目的主入口文件（通常是main.js或app.js）中引入并使用Vue Router：

import Vue from 'vue'


import VueRouter from 'vue-router'





Vue.use(VueRouter)

二、配置路由

接下来，需要配置路由。创建一个新的文件（例如router.js）来管理路由配置：

import Vue from 'vue'


import Router from 'vue-router'


import Home from '@/components/Home.vue'


import About from '@/components/About.vue'





Vue.use(Router)





export default new Router({


  routes: [


    {


      path: '/',


      name: 'home',


      component: Home


    },


    {


      path: '/about',


      name: 'about',


      component: About


    }


  ]


})

然后，在主入口文件中引入这个路由配置：

import router from './router'





new Vue({


  router


}).$mount('#app')

三、创建单独页面的组件

在components目录下创建单独页面的组件文件，比如Home.vue和About.vue：

// Home.vue