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. 简单使用