vue 页面导航实现思路及相关实现代码
时间: 2023-09-04 20:15:26 浏览: 45
Vue 页面导航可以通过 Vue Router 实现。下面是实现思路及相关代码:
1. 安装 Vue Router
```bash
npm install vue-router
```
2. 创建路由实例
在 `src` 目录下创建 `router` 目录,新建 `index.js` 文件,编写路由实例的代码:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import('@/views/About.vue')
}
]
})
```
在上面的代码中,我们定义了两个路由,一个是根路径 `/` 对应的组件为 `Home.vue`,另一个是路径 `/about` 对应的组件为 `About.vue`。
3. 在 Vue 实例中使用路由
在 `src` 目录下的 `main.js` 文件中,导入路由实例并使用:
```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
在上面的代码中,我们将路由实例注入到 Vue 实例中,然后在模板中使用 `router-link` 组件进行导航:
```html
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
```
此外,还可以使用 `router.push()` 方法进行编程式导航:
```javascript
this.$router.push('/about')
```
以上就是 Vue 页面导航的实现思路及相关代码。