Vue2 路由组件：vue-router 使用？

yuroll

已于 2023-03-23 10:29:48 修改

阅读量164

点赞数

分类专栏： # router 文章标签： vue.js javascript ecmascript

于 2023-03-22 17:17:09 首次发布

本文链接：https://blog.youkuaiyun.com/yuroll/article/details/129714445

版权

router 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Vue2项目中安装vue-router@3，并创建路由组件和配置路由映射。通过在main.js中引入路由实例，实现页面间的声明式和编程式跳转，利用<router-link>和<router-view>进行导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装vue-router，vue2要安装vue-router@3

npm install vue-router@3 --save

2、创建路由组件

新建src/views/路由组件.vue. 如：

3、创建路由实例，并配置路由映射关系

新建src/router/index.js

import Vue from 'vue';
import Router from 'vue-router'
Vue.use(Router)

import Home from '@/views/Home'
import Search from '@/views/Search'
//创建路由器
const router = new Router({
    routes: [{
        path: '/home',
        component: Home,
    }, {
        path: '/search',
        component: Search
    },{
        path:'/',
        redirect:'/home' //重定向
    }]
});


export default router;

4、在main.js中，使用已配置的路由对象

//导入路由对象
import router from './router'

new Vue({
  render: h => h(App),
  router,//vc产生$router
}).$mount('#app')

5、使用路由

6、router-link与router-view

<router-link>：该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签。

<router-view>：该标签会根据当前的路径，动态渲染出不同的组件。

7、跳转方式

方式一：声明式跳转 <router-link>：渲染成<a>标签。

方式一：编程式跳转 $router.push('/home')是针对非<a>标签的元素，如button等