Vue2从0到1(二)：Vue-router的使用

JellyBool 发布于2019-08-21 16:40 / 1417人阅读

摘要：将路由写法改为定义路由的方法跳转路由字符串对象命名的路由带查询参数，变成下一章讲解状态管理以上代码代码亲测可用，托管在上面，欢迎参考文献效果图

上一篇讲了Vue起步：环境的搭建用webpack打包vue 下面讲一下vue路由vue-router 8.使用路由vue-router2

首先安装 vue-router:

npm install vue-router --save

修改main.js:

1.引入APP,about两个组件导入router组件
引入子组件Child

    import App from "./src/index.vue";
    import About from "./src/about.vue";
    import Child from "./src/children.vue" 
    import VueRouter from "vue-router";

    Vue.use(VueRouter)

2.定义路由：
嵌套路由用children:[]存放,子组件在父组件的

中渲染,路由通过 "/:id" 定义参数通过链接 "/about/123"传递参数
在组件中通过{{$route.params.id}}获取传参

const routes = [
    { path: "/index", component: App },
    { path: "/about/:id", component: About ,children:[
        { path: "child", component: child}
    ]}
]

创建 router 实例，然后传 routes 配置

    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

创建和挂载根实例。

    const app = new Vue({
        router
    }).$mount("#main")

5.修改index.html文件

    
        
            index
            about
            child router

6.修改父组件about.vue
写才发现，只能有一个顶级的HTML标签


    
        {{ msg }}
        
        传递的参数为：{{ $route.params.id }}

8.1路由重定向redirect

routes: [
    ...
    { path: "/a", redirect: "/index" }
  ]

访问/a时将跳转值/index对应的组件

8.2 路由懒加载

用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载，我们可以利用路由的懒加载去优化这个问题。将路由写法改为：

//定义路由
const routes = [
    { path: "/index", component: resolve => require(["./src/index.vue"], resolve) },
    {
        path: "/about/:id", component: resolve => require(["./src/about.vue"], resolve) ,
        children:[
            { path: "child", component: resolve => require(["./src/children.vue"], resolve)}
    ]},
    { path: "/a", redirect: "/index" }
]

8.3 js的方法跳转路由

    // 字符串
    router.push("home")
    // 对象
    router.push({ path: "home" })
    // 命名的路由
    router.push({ name: "user", params: { userId: 123 }})
    // 带查询参数，变成 /register?plan=private
    router.push({ path: "register", query: { plan: "private" }})

下一章讲解状态管理Vuex

以上代码代码亲测可用，托管在github上面，欢迎star

参考文献:vue-router
效果图:

海外云主机云服务器从0到1搭建视频通话系统从0开始到1千万用户 vue2.0 cdn 从1个想法到35万活跃用户

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

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

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
【转】使用Vue-Router 2实现路由功能

摘要：请输入代码注意只适用于版本，下面我们是基于讲的如何使用实现路由功能。一使用路由在中，需要明确安装路由功能定义组件，这里使用从其他文件进来定义路由创建实例，然后传配置创建和挂载根实例。路由记录就是配置数组中的对象副本还有在数组。请输入代码注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。推荐使用npm安装...

seanlook 2019-08-21 15:36 评论0 收藏0
vue2实践（持续更新）

摘要：记录一些小技巧和踩过的坑由于本篇文章内容太多，导致编辑器有点卡，所以新开辟了一篇实践二，后续再这里更新。组件的生命周期函数是在标签里的数据发生变化时候触发数据可能更新了，但是没有绑定到上面的话，不会调用钩子函数。记录一些小技巧和踩过的坑由于本篇文章内容太多，导致SF编辑器有点卡，所以新开辟了一篇 vue2实践（二），后续再这里更新。 1. props 带不带冒号的区别 ...

n7then 2019-08-20 15:05 评论0 收藏0