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中通过写按钮的方式对其进行跳转
• 

路由的参数

• url
• 
• 显示

路由的钩子函数

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

  

命名的路由视图

• 一个路由对应多个组件
• 
• div中写法

Vue的生命周期

• 图示

  

  流程图

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

使用router组件流程

1. 下载

   npm install vue-router
   

2. 配置

   

3. 注册到vue中

   

4. 简单使用