美文网首页
vue笔记(六)

vue笔记(六)

作者: 编程东 | 来源:发表于2024-02-26 17:07 被阅读0次

    vue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。这是官方的解释,简单来说就是使前端页面更好地与后端的数据进行交互。

    首先,要在开发的vue项目中用到vue-router就要先安装。

    npm install vue-router --save
    

    安装好后我们创建一个文件夹router,在文件夹下面创建index.js。


    router

    然后在index.js下面引入vue-router。

    引入
    配置 配置
    暴露
    import VueRouter from "vue-router";
    import Vue from "vue";
    const home = ()=> import ('@/views/home/Home.vue')
    
    Vue.use(VueRouter)
    
    const routes = [
        {
            path:'',
            redirect:'/home'
        },
        {
            path:'/home',
            name:'home',
            component:home
        }
    ]
    
    const router = new VueRouter({
        routes,
        mode:'history',
        linkActiveClass:'active'
    })
    
    export default router
    
    const home = ()=> import ('@/views/home/Home.vue')
    

    是引入外部的组件或应用。

    Vue.use(VueRouter)
    

    将引入的vue-router注册成Vue插件。

    const routes = [
        {
            path:'',
            redirect:'/home'
        },
        {
            path:'/home',
            name:'home',
            component:home
        }
    ]
    

    routes这个数组是必须要有内容的,里面的对象都是每一条路由得相关配置,redirect:'/home'是默认打开的页面是路径为/home的页面。

     mode:'history'
    

    history模式的作用是在去除地址上出现的#符号。

    linkActiveClass:'active'
    

    linkActiveClass是给所有的router-link的默认样式该名称,router-link的默认样式名称很长,所以如果要修改的话会有一点麻烦,所以可以给它改成简短一点的名称。

    export default router
    
    main.js

    最后是要把vue-router暴露出去,因为在使用vue-router的时候需要把它引入,main.js文件中,来对它进行一个全局的使用。

    相关文章

      网友评论

          本文标题:vue笔记(六)

          本文链接:https://www.haomeiwen.com/subject/rwmtkrtx.html