乘风原创程序

  • 150Vue-Router路由概述+基本使用router-view占位符+重定向redirect
  • 2020/8/10 9:48:24
  • Vue Router简介

    它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器,推荐使用。
    Vue Router和Vue.js非常契合,可以一起方便的实现SPA斜体样式(single page web application,单页应用程序)应用程序的开发。
    Vue Router依赖于Vue,所以需要先引入Vue,再引入Vue Router

    Vue Router的特性:

    支持H5历史模式或者hash模式
    支持嵌套路由
    支持路由参数
    支持编程式路由
    支持命名路由
    支持路由导航守卫
    支持路由过渡动画特效
    支持路由懒加载
    支持路由滚动行为

    4.Vue Router的使用步骤(★★★)

    A.导入js文件
    <script src="lib/vue_2.5.22.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
    B.添加路由链接:<router-link>是路由中提供的标签,默认会被渲染为a标签,to属性默认被渲染为href属性,
    to属性的值会被渲染为#开头的hash地址
    <router-link to="/user">User</router-link>
    <router-link to="/login">Login</router-link>
    

    在这里插入图片描述

    C.添加路由填充位(路由占位符)
    <router-view></router-view>
    

    在这里插入图片描述

    D.定义路由组件
    var User = { template:"<div>This is User</div>" }
    var Login = { template:"<div>This is Login</div>" }
    

    在这里插入图片描述

    E.配置路由规则并创建路由实例
    var myRouter = new VueRouter({
        //routes是路由规则数组
        routes:[
            //每一个路由规则都是一个对象,对象中至少包含path和component两个属性
            //path表示  路由匹配的hash地址,component表示路由规则对应要展示的组件对象
            {path:"/user",component:User},
            {path:"/login",component:Login}
        ]
    })
    

    在这里插入图片描述

    F.将路由挂载到Vue实例中
    new Vue({
        el:"#app",
        //通过router属性挂载路由对象
        router:myRouter
    })
    

    在这里插入图片描述

    <!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>
        <!-- 导入 vue 文件 -->
        <script src="./lib/vue_2.5.22.js"></script>
        <script src="./lib/vue-router_3.0.2.js"></script>
      </head>
      <body>
        <!-- 被 vm 实例所控制的区域 -->
        <div id="app">
          <router-link to="/user">User</router-link>
          <router-link to="/register">Register</router-link>
    
          <!-- 路由占位符 -->
          <router-view></router-view>
        </div>
    
        <script>
          const User = {
            template: '<h1>User 组件</h1>'
          }
    
          const Register = {
            template: '<h1>Register 组件</h1>'
          }
    
          // 创建路由实例对象
          const router = new VueRouter({
            // 所有的路由规则
            routes: [
              { path: '/user', component: User },
              { path: '/register', component: Register }
            ]
          })
    
          // 创建 vm 实例对象
          const vm = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {},
            // 挂载路由实例对象
            // router: router
            router
          })
        </script>
      </body>
    </html>
    
    

    路由重定向:可以通过路由重定向为页面设置默认展示的组件

    { path: ‘/’, redirect: ‘/user’}

    在路由规则中添加一条路由规则即可,如下:
    var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址,设置为一个路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
    })
    

    本文地址:https://blog.csdn.net/Gy_9543/article/details/107891718