vue中使用router-link如何修改main.js和router.js实现跳转
时间: 2023-12-10 21:37:35 浏览: 31
在 Vue 中使用 `router-link` 可以通过以下步骤实现跳转:
1. 在 `main.js` 中导入 `vue-router` 并创建一个路由器实例:
```javascript
import VueRouter from 'vue-router'
import routes from './router'
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
```
2. 在 `router.js` 文件中定义路由表:
```javascript
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
export default routes
```
3. 在模板中使用 `router-link` 进行跳转:
```html
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
```
这样点击 `router-link` 就会自动跳转到对应的路由页面。
注意:如果你想在全局使用 `router-link`,可以在 `main.js` 中导入后注册为全局组件:
```javascript
import VueRouter from 'vue-router'
import routes from './router'
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
import RouterLink from '@/components/RouterLink.vue'
Vue.component('router-link', RouterLink)
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```