第三十八篇:vue3路由

好家伙,水博客怎么说

 

1.0.安装:简简单单的淘宝镜像安装

装一下淘宝镜像(一般都有)

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后装router

cnpm install vue-router@4  //vue3用版本router4

 

2.路由语法

//写在router.js中src目录下

inport {createRouter} from "vue-router"; //方法createRouter:创建一个路由

const router = createRouter();  //创建路由

export dafault router;              //暴露router

 

3.改一下 

// main.js下

creatApp(App).mount('#app')

把他拆开(就多加一个变量)

const app = creatApp(App)

mount('#app')
 

 

4.引用router(语法大概和vue2差不多)

//还是在main.js下

import router from "./router.js"

const app = creatApp(App)

app.use(router);

mount('#app')
 

 

5.开始设置路由

// 在router.js中src目录下

inport { createRouter,createWebHashHistory} from "vue-router"; //

improt <组件名> from  "./路径1"
improt <组件名> from  "./路径2"

const router = createRouter({
        routes:[{
                  path:"/",
                  component:<组件名>
                    },
                    {
                  path:"/123",
                  component:<组件名>
                    }]
                    });  //创建路由

export dafault router;              //暴露router                        

 

6.app.vue中

//依旧是那两个:1.点击跳转路径, 2.组件视图

<router-link to="/123">首页</router-link>
<router-view></router-view>

 

然后就能点击跳转了,

就这么多了