vue2.0手动添加路由
时间: 2023-07-28 17:23:50 浏览: 82
要手动添加路由,需要在 Vue 的路由配置文件中引入 Vue 和 Vue Router,并且创建路由实例。以下是一个基本的手动添加路由的示例代码:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
export default router
```
在这个示例代码中,我们首先引入了 Vue 和 Vue Router,接着使用 Vue.use() 方法注册 Vue Router,然后创建了一个路由实例,并定义了两个路由:'/' 和 '/about'。在这两个路由中,我们分别定义了路径、路由名称和组件。最后,我们导出了这个路由实例,以便在 Vue 应用中使用它。
当你手动添加路由时,你需要确保将这个路由实例导入到你的 Vue 应用中,并在 Vue 实例中使用它。例如,你可以这样做:
```javascript
import Vue from 'vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
在这个示例代码中,我们将路由实例作为 Vue 实例的一个属性,然后将它传递给 Vue 实例的 router 选项。这样,我们就可以在 Vue 应用中使用这个路由实例了。
阅读全文