vue2+ts新建页面怎么配置路由
时间: 2024-01-14 11:02:16 浏览: 82
首先,你需要安装 `vue-router` 和 `@types/vue-router` 依赖包,可以使用以下命令进行安装:
```
npm install vue-router @types/vue-router --save
```
接下来,你需要在 `router/index.ts` 文件中创建一个新的路由页面:
```typescript
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld.vue';
import NewPage from '@/components/NewPage.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
{
path: '/new-page',
name: 'NewPage',
component: NewPage,
},
],
});
```
在上面的代码中,我们创建了一个名为 `NewPage` 的新页面,并将其路由到了 `/new-page` 路径下。
最后,你需要在 `main.ts` 文件中将路由挂载到 Vue 实例中:
```typescript
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');
```
这样,你就成功配置了新页面的路由。
阅读全文