从零开肝Vue2.0(配置路由环境与简单使用)

最新推荐文章于 2025-05-21 12:38:26 发布

原创最新推荐文章于 2025-05-21 12:38:26 发布 · 496 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中安装和使用Vue Router。首先，通过npm安装vue-router，然后创建/src/router/index.js文件，导入并配置路由组件。在main.js中引入并启用Vue Router。使用<router-link>和<router-view>标签进行页面跳转和内容展示。文章详细展示了基础路由和嵌套路由的设置方法。

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

在项目中安装route和vue-router

npm i route
npm i vue-router

创建/src/router/index.js文件

//引入vue-router
import VueRouter from "vue-router";
//引入需要路由的组件
import About from "@/components/About";
//引入需要路由的组件
import Home from "@/components/Home";
//创建并暴露VueRouter
export default new VueRouter({
    routes:[
        {
        //跳转路由的路径和跳转到的组件
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})
注：：多级路由的写法 如：在Home下有个test 即 /Home/test，写法如下
	routes:[
	  {
            path:'/home',
            component:Home,
            children:[
            {
            path:'test',//这里不需要再加  '/'
            component:Test,
            }
				]
        }
	]

在main.js中引入并使用
使用方法

<router-link></router-link>
相当于<a></a>标签，
<router-link  to="上面定义的跳转的path"></router-link>

跳转后组件显示的内容，和插槽类似，通过
  <router-view></router-view>
  来指定跳转后的组件出现的位置