vue路由-router

VueRouter基础

vue路由的注册

  1. 导入

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    # 可以是下载之后的
       <script src="vue.min.js"></script>
        <script src="vue-router.js"></script>
    
  2. 定义一个匹配规则对象

    let url=[
        {
            path: "/",
            component: {
                template:`<div><h1>组件</h1></div>`
            }
        }
    ]
    
  3. 实例化VueRouter对象,并把匹配规则注册进去

    let router = new VueRouter({
        routes: url
    });
    
  4. 把VueRouter实例化对象注册Vue的根实例中

    const app = new Vue({
        el: "#app",
        router : router
    })
    
  5. 在div标签中直接调用就可以了

    <!--4 直接写router-link标签就-->
    <router-link to="/">首页</router-link>
    <router-link to="course">课程</router-link>
    <router-view></router-view>
    

路由的命名

  • 路由的参数name和调用this.$route.params.name

  • let url = [{
        path: "/user/:name",
        name : 'user',
        component: {
            template: `<div><h1>这是{{this.$route.params.name}}页面</h1></div>`,
            mounted(){
                console.log(this.$route)
            }
        }
    }]
    
  • 调用

    <div id="app">
        <router-link :to="/">主页</router-link>
        <router-link :to="{name: 'login'}">登陆</router-link>
        <router-link :to="{name: 'user', params: {name: 'ruizhiling'}}">角色</router-link>
        <router-view></router-view>
    </div>
    
  • 注意to一定动态绑定

手动路由

  • 在url中通过写按钮的方式对其进行跳转
  • 50ai7H.png

路由的参数

  • url
  • 50CWzK.png
  • 显示
  • 1544079947816

路由的钩子函数

  • -- beforeEach(function(to, from, next){
          to 你要去哪里
          from 你从哪里来
          next 你接下来要做什么
    })
    -- afterEach(function(to, from){
          to 你要去哪里
          from 你从哪里来
    })
    

    50Cpqa.png

命名的路由视图

  • 一个路由对应多个组件
  • 50ChVH.png
  • div中写法
  • 1544081005027

Vue的生命周期

  • 图示

    50CvvN.jpg

    流程图

    new Vue --> 监听数据 --> 初始化事件 --> 找el --> template --> 编译形成虚拟DOM
    --> 渲染页面 -- 数据改变重新渲染页面 -- app.$destroy()
    

使用router组件流程

  1. 下载

    npm install vue-router
    
  2. 配置

    5Qt26R.png

  3. 注册到vue中

    5QtR5r.png

  4. 简单使用

    5QtgOY.md.png

posted @ 2019-01-01 19:51  云丛  阅读(130)  评论(0编辑  收藏  举报