vue-router的基本使用

基本使用

1.导入js文件

2.添加路由链接

 
 
 User
 Register

3.添加路由占位符(最后组件展示的位置)

   
 //   只不过没有默认显示的组件：需要用到重定向

router-view：路由-视图，显示用户点击的路由链接对应的组件

• 视图：组件可以显示出具体内容，可以理解为视图
• 例如：用户点击User路由链接，就会将User组件显示到这里

4.定义路由组件

 const User = {
        template: '
User 组件
'
      }

      const Register = {
        template: '
Register 组件
'
      }

5.创建路由实例，并配置路由规则

 // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则 （与之前的onhashchange的目的是一样的）
        # routes 是路由组件中的API
        routes: [//这个就是前端路由的具体体现
        // 每一个路由规则都是一个对象，包含path和component属性 只接收路由对象
        # component 只接收路由对象
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

6.将路由挂载到Vue实例中

  // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        //6.挂载路由实例对象
        // router: router
        router

路由重定向

• router-view 默认显示的组件，需要通过路由重定向来实现

//  路由重定向指的是：用户在访问地址 A的时候，强制用户跳转到地址C，从而展示特定的组件页面；通过路由规则的redirect 属性，指定一个新的路由地址，可以很方便地设置路由重定向
   const router = new VueRouter({
        # routes 是路由组件中的API
        routes: [
          { path: '/', redirect: '/user' },
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

• rediret：重定向
• 普通的路由是定义path和component，访问url显示对应组件
• 重定向路由是定义path和redirect，访问url跳转到另一个url

vue-router嵌套路由

• 步骤

  1.父路由组件模板

    
      
  
        User
        Register
  
        
        
      
  

  2.子路由模板

  // 在父级路由里面定义子级路由
        const Register = {
          template: `
  
            
  Register 组件
            
  
  
            
            tab1
            tab2
  
            
            
          
  `
        }
  
  

  3.路由嵌套配置

  // 父级路由通过children 属性，为自己添加子路由规则
        const router = new VueRouter({
          // 所有的路由规则
          routes: [
            { path: '/', redirect: '/user'},
               # component 只接收路由对象
            { path: '/user', component: User },
            // 在父级路由里面通过 children 以数组的形式，配置子级路由
            { path: '/register', component: Register, children: [
              { path: '/register/tab1', component: Tab1 },
              { path: '/register/tab2', component: Tab2 }
            ] }
          ]
        })
  

vue-router动态路由匹配

动态路由匹配

应用场景：通过动态路由参数的模式进行路由匹配

    
    

      User1
      User2
      User3
      Register

      
      
    

    

vue-router编程式导航

页面导航的两种方式

• 声明式导航：通过点击链接实现导航的方式，叫做声明式导航

• 编程式导航：通过Javascript形式的API实现导航的方式

• 页面导航：就是页面的跳转

编程导航

• 基本用法

 const User = {
        template: `

          跳转到注册页面
        
`,
        methods: {
          goRegister() {
            this.$router.push('/register')
              //跳转到注册页面（锚点），可以看下效果
          }
        },
      }
 this.$router.push('hash地址')
   - push 跳转地址
 this.$router.go(n)
   - n，代表前进n个界面
   - -n，代表后退n个界面

push参数

• 介绍

// 字符串（路径名称）
router.push('/home')
// 对象
router.push({ path: '/home'})
// 命名路由（传递参数）
router.push({ name: '/user', params: {userId: 123 }})
// 带查询参数，变成 /register?uname=lisi
router.push({ path: '/register', query: { uname: 'lisi'}})

• 跟route-link是一样的作用，都是实现页面跳转

• 所以push中可以直接写path路径（路由），也可以写命名路由

• 相当于：

User1

User123
Register