Loading

23_vue-router基本使用

Vue Router简介

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。

Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

Vue Router的特性：

支持H5历史模式或者hash模式

　　支持嵌套路由

　　支持路由参数

　　支持编程式路由

　　支持命名路由

　　支持路由导航守卫

　　支持路由过渡动画特效

　　支持路由懒加载

　　支持路由滚动行为

Vue-基础使用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 1、导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 2、添加路由链接:<router-link>是路由中提供的标签，默认会被渲染为a标签，
　　　　　　to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 3、路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      // 4、定义路由组件
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 5、配置路由规则并创建路由实例
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          // 每一个路由规则都是一个对象，对象中至少包含path和component两个属性
          // path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
          { path: '/user', component: User },
          { path: '/register', component: Register },
          // 补充：
          // 路由重定向：可以通过路由重定向为页面设置默认展示的组件
          // 在路由规则中添加一条路由规则即可，如下：
          { path:"/",redirect:"/user"}
        ]
      })

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

 

posted @ 2022-08-21 23:15  1640808365  阅读(25)  评论(0)  编辑  收藏  举报