vue新建路由
时间: 2023-07-01 09:28:02 浏览: 100
vue.js路由的简单创建
要在 Vue 中新建一个路由,需要进行以下步骤:
1. 在 `src/router` 目录下新建一个 js 文件,例如 `myRouter.js`。
2. 在 `myRouter.js` 中引入 Vue 和 Vue Router:
```
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
```
3. 定义路由组件:
```
const Home = () => import('@/views/Home');
const About = () => import('@/views/About');
```
4. 定义路由:
```
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
];
```
5. 创建路由实例:
```
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
```
6. 导出路由实例:
```
export default router;
```
7. 在 `src/main.js` 中引入 `myRouter.js`:
```
import router from '@/router/myRouter';
```
8. 在 Vue 实例中挂载路由:
```
new Vue({
router,
render: h => h(App)
}).$mount('#app');
```
这样,就成功在 Vue 中新建了一个路由。
阅读全文