vue router我看是针对单页面应用的解决方案,有没有针对多页面的呢,就是那种点了链接跳到某个子path页面,然后根据path去匹配选择对应的view的方式,求解,请给出完整代码
时间: 2023-02-14 13:48:31 浏览: 48
Vue Router 是针对单页面应用的路由解决方案,它支持在单页面内进行路由切换。如果您需要多页面应用,可以使用 vue-cli 来构建多页面应用。
具体实现方法如下:
1. 使用 vue-cli 构建项目,在根目录下创建一个 pages 目录,里面放置所有的页面组件。
2. 在 vue.config.js 文件中配置 webpack 的 entry 和 output,根据 pages 目录下的文件自动生成多页面入口。
3. 使用 vue-router 进行路由配置,在每个页面组件中进行路由的定义。
以下是一个简单的代码示例:
```
// vue.config.js
module.exports = {
pages: {
index: {
entry: 'src/pages/index/main.js',
template: 'public/index.html',
filename: 'index.html'
},
about: {
entry: 'src/pages/about/main.js',
template: 'public/about.html',
filename: 'about.html'
}
}
}
// src/pages/index/main.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './About.vue')
}
]
})
```
这只是一个简单的示例代码,可能需要更多的配置和实现来满