起步

Vue路由官方的解释是:Vue RouterVue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.
具体介绍以及用法 请参考官方文档:https://router.vuejs.org/

Vue-router使用的前提是需要引入Vue-router依赖包!

NPM安装Vue-router依赖包:npm install vue-router

基本用法

    <div id="app">
     <!-- router-link 控制组件的切换  router-link 会被渲染成a标签-->
     <!-- 如果不想被渲染成a标签 可以使用tag属性 指定router-link被渲染成哪种标签-->
        <router-link to="/login" tag="span" >登录</router-link>
        <router-link to="/reg">注册</router-link>

        <transition mode="out-in">
            <!-- 这是一个坑 专门做一个占位符 当路由进行切换的时候 在路由中匹配到对应的组件 就会展示在这个坑里 -->
            <router-view></router-view>
        </transition>
    </div>
        var login = {
            template:'<h1>我是登录组件</h1>',
        }
      
        var reg = {
            template:'<h1>我是注册组件</h1>',
        }

        // 当引入了vue-router之后 在Windows全局对象中就有了一个VueRouter构造函数 

        let routerObj = new VueRouter({
            routes:[ // 定义了路由 中的规则
                {path:'/',redirect:'/login'}, //redirect 就是重定向 将他访问path时会被重定向到redirect的路由 这里指路由重定向 并非请求重定向 和后端的redirect是两码事。
                {path:'/login',component:login}, // 对象中有两个属性 path表示路由的url  component 表示路由跳转到的组件
                {path:'/reg',component:reg}
            ]
        })


        var vue = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
            router:routerObj
        })
最后修改:2020 年 06 月 29 日 11 : 17 AM
如果觉得我的文章对你有用,请随意赞赏