vue-router学习

elva 发布于2019-08-26 13:38 / 2473人阅读

vue-router使用步骤(本教程并不全面，只研究到了本人够用的程度，如果还想要深入了解路由，请在vue router 文档中学习)：

手动：

npm 安装 vue-router npm install vue-router

配置路由

1. 在main.js同级目录下（目录结构不一定要和我完全一样）新建router.js；
2. 在router.js中引用vue 和 vue-router 并 用vue.use（）在vue中使用该插件
    import vue from  "vue"
    import router from "vue-router"
    vue.use(router)
3. 引入需要配置的页面（可选）
    import Home from "./views/Home.vue"
4. 在router.js中配置路由
    1. 路由配置格式
        let routers = [
            {
                path:"/",
                name:"home", //可选
                component:Home //已经引入可以用这中方法
            },
            {
                path:"/about",
                name:"about", //可选
                component:()=> import("./views/About.vue")  
                        //没有提前引入的页面可以用该方法引入
            }
        ]
    2. 实例化该配置
        export default new router({
            routers
        })

在main.js中应用该router实例

1. 引入实例 `import router from "./router"`
1. 使用该实例 
    new Vue({
        ......
        router,
        ......
    })

在页面中用来放置路由展示部分的html

在页面中使用路由

    
    // “/home”要与 routers中的path一致

vue ui 辅助（初学者不建议使用该方法）

在vue ui 插件页面右上角点击添加vue-router

万事大吉

额外知识点
npm 运行时如果main.js的vue实例中没有 render 配置项则需要在vue.config.js文件中额外设置 runtimeCompiler 配置项为 true。（这个配置项设置为true后会使得项目最终打包文件大10kb 不建议使用该方法）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109222.html

vue-router 学习

摘要：第一步路由配置项第二步路由映射全部精华路由参数是路由参数。和这两行代码，使用了用了具名路径。对应路由配置中的，使用接收参数。参考 vue-router文档使用Vue快速开发单页应用 vue-router Vue.js——vue-router 60分钟快速入门 Demo:https://github.com/keepfool/vue-tutorials/blob/master/...

Achilles 2019-08-20 11:19 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

tommego 2019-08-23 12:55 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

jhhfft 2019-08-02 11:56 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

frontoldman 2019-08-29 17:11 评论0 收藏0
Vue学习日记（三）——Vue路由管理vue-router

摘要：重定向可以实现某些需要根据特定逻辑改变页面原本路由的需求，例如简单的未登录状态下的页面访问个人信息路由时应该重定向到登录路由页面。前言为了给读者更好的体验，去理解vue-router和下一篇介绍vuex，决定还是来一个实战教程来带大家更加的去深入理解vue-router，在这之前，读者先自行了解和去官网下载npm和node，附：npm官网项目构建这里我采用vue-cli+web...

iKcamp 2019-08-30 13:54 评论0 收藏0