首页 > 其他分享 >router路由的基本使用

router路由的基本使用

时间:2023-02-25 10:25:08浏览次数:23  
标签:基本 About vue js path 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")
    }
  ]
});

 

 

 

 

 

标签:基本,About,vue,js,path,router,路由
From: https://www.cnblogs.com/0722tian/p/17153769.html

相关文章