Vue Router路由创建

今天又是一个星期难遇一次的星期五

哥几个今天又来学前端了

Vue Router路由一般用于对组件进行映射与跳转，并传递参数（其他的场景我也不知道了），一听就知道不简单

那接下来咱们就进入主题啦，第一步咱们应该干点什么好呢

咱们引入资源包

咱们先下载一个包，反正不是叉烧包，下载命令是酱紫：npm i vue-router，要是不行得话可以百度，其实结果都是一样的，因为我也是百度的

下载完成之后，咱们就引入资源包，大致得代码如下：

接着咱们一定要导出，不导出也会没效果

那么咱们第一步就完成了，放心后面还有很多步

开始开始

创建路由

• ⚡创建路由实例，这里咱们用const

const router= new VueRouter({})

• ⚡通过routes添加路由配置，千万不要把routes写成router，不然也是pink色

const router= newVueRouter({
    routes:[{}]
})   

• ⚡添加单个路由配置，常用的有： 路由路径 ：path 组件实例：component

const router= newVueRouter({
    routes:[{
        path:'路由路径',
        component:引入文件的名字
    }]
})

注入路由

• ⚡在入口文件里面引入路由模块，我这里用的文件名字是main.js，所以我是引入到main.js这个文件啦

import router from '路由模块'

• ⚡在new Vue({})中注入router

new Vue({
    router,
})

• ⚡在app.vue根组件中需要渲染的地方，写上router-view标签

最后就是在页面中添加路由的超链接啦

<router-link to='模块'>
主页path写的什么路径必须是什么路径，比如/login，模块里必须写/login

还看，没了，写完了，大概就是这样子，多的也不会写，祝大家周末愉快，敲不出代码怎么好意思过周末的