vue路由是什么,请用代码教会我如何使用
时间: 2023-02-22 14:57:11 浏览: 72
Vue 路由是 Vue.js 框架中的一个模块,它允许我们在应用中创建不同的视图,并通过不同的 URL 访问这些视图。
要使用 Vue 路由,首先需要安装 vue-router 库,然后在 Vue 实例中引入并使用它。
以下是一个使用 Vue 路由的示例代码:
```
// 安装 vue-router
npm install vue-router
// main.js 中引入并使用 vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 定义路由组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 定义路由规则
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
// 创建路由实例
const router = new VueRouter({
routes
})
// 创建 Vue 实例,并将路由实例附加到实例上
new Vue({
router
}).$mount('#app')
```
在上面的代码中,我们定义了两个路由组件 Home 和 About,并通过路由规则将它们映射到两个不同的 URL 上。最后,我们创建了一个路由实例,并将它附加到了 Vue 实例上。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)