router路由的基本使用

1.安装

如果是通过脚手架创建的项目可以勾选router选项；

通过指令在编译器的终端下载  (npm i router) vue2的项目只能使用vue3的router版本

2.配置

安装之后你的项目目录就会出现一个在src里的router.js

main.js配置

 

router.js配置

 App.vue里 写一个占位符

 

 

 

 3.使用

使用的组件.vue

router-link  to=" /路径的名称"   只是 / 就是默认页面的呈现

 <router-link to="/"><div>Home</div></router-link> 

以下代码 / 后面就是 要传送到哪个地址

<router-link to="/about"><div>About</div></router-link>

router.js文件

export default new Router({
  routes: [
    {
        // 页面开始就显示的路由
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: () =>
        import("./views/About.vue")
    }
  ]
});