0
点赞
收藏
分享

微信扫一扫

router路由的基本使用

1.安装

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

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

2.配置

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

router路由的基本使用_占位符

main.js配置

router路由的基本使用_编译器_02

 

router.js配置

router路由的基本使用_占位符_03

 App.vue里 写一个占位符

router路由的基本使用_编译器_04

 

 

 

 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")
}
]
});

 

router路由的基本使用_编译器_05

 

 

 

router路由的基本使用_App_06

 



举报

相关推荐

0 条评论