乐趣区

关于vue.js:Vue基础学习记录五

jiezi

学习指标

路由
前端路由的实现原理
应用 Vue-Router 实现前端路由
实现嵌套路由，动静路由
实现命名路由以及编程式导航
并实现后盾治理案例

1. 路由的概念

路由的实质就是一种对应关系，比如说咱们在 url 地址中输出咱们要拜访的 url 地址之后，浏览器要去申请这个 url 地址对应的资源。
那么 url 地址和实在的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由

  • 后端路由是由服务器端进行实现，并实现资源的散发
  • 前端路由是依附 hash 值 (锚链接) 的变动进行实现

后端路由性能绝对前端路由来说较低，所以，咱们接下来次要学习的是前端路由
前端路由的基本概念：依据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系
前端路由次要做的事件就是监听事件并散发执行事件处理函数

SPA(Single Page Application)

  • 后端渲染（存在性能问题）
  • Ajax 前端渲染（前端渲染进步性能，然而不反对浏览器的后退后退操作）
  • SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变动通过 Ajax 部分更新实现、同时反对浏览器地址栏的后退和后退操作
  • SPA 实现原理之一：基于 URL 地址的 hash（hash 的变动会导致浏览器记录拜访历
  • 史的变动、然而 hash 的变动不会触发新的 URL 申请）
  • 在实现 SPA 过程中，最外围的技术点就是前端路由

前端路由

  • 概念：依据不同的用户事件，显示不同的页面内容
  • 实质：用户事件与事件处理函数之间的对应关系

后端路由

  • 概念：依据不同的用户 URL 申请，返回不同的内容
  • 实质：URL 申请地址与服务器资源之间的对应关系

2. 前端路由的初体验

前端路由是基于 hash 值的变动进行实现的（比方点击页面中的菜单或者按钮扭转 URL 的 hash 值，依据 hash 值的变动来管制组件的切换）
外围实现依附一个事件，即监听 hash 值变动的事件

window.onhashchange = function(){
    //location.hash 能够获取到最新的 hash 值
    location.hash
}

前端路由实现 tab 栏切换：

    <!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>
    </head>
    <body>
        <!-- 被 vue 实例管制的 div 区域 -->
        <div id="app">
        <!-- 切换组件的超链接 -->
        <a href="#/zhuye"> 主页 </a> 
        <a href="#/keji"> 科技 </a> 
        <a href="#/caijing"> 财经 </a>
        <a href="#/yule"> 娱乐 </a>

        <!-- 依据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的地位 -->
        <!-- 能够把 component 标签当做是【组件的占位符】-->
        <component :is="comName"></component>
        </div>

        <script>
        // #region 定义须要被切换的 4 个组件
        // 主页组件
        const zhuye = {template: '<h1> 主页信息 </h1>'}

        // 科技组件
        const keji = {template: '<h1> 科技信息 </h1>'}

        // 财经组件
        const caijing = {template: '<h1> 财经信息 </h1>'}

        // 娱乐组件
        const yule = {template: '<h1> 娱乐信息 </h1>'}
        // #endregion

        // #region vue 实例对象
        const vm = new Vue({
            el: '#app',
            data: {comName: 'zhuye'},
            // 注册公有组件
            components: {
            zhuye,
            keji,
            caijing,
            yule
            }
        })
        // #endregion

        // 监听 window 的 onhashchange 事件，依据获取到的最新的 hash 值，切换要显示的组件的名称
        window.onhashchange = function() {
            // 通过 location.hash 获取到最新的 hash 值
            console.log(location.hash);
            switch(location.hash.slice(1)){
            case '/zhuye':
                vm.comName = 'zhuye'
            break
            case '/keji':
                vm.comName = 'keji'
            break
            case '/caijing':
                vm.comName = 'caijing'
            break
            case '/yule':
                vm.comName = 'yule'
            break
            }
        }
        </script>
    </body>
    </html>

案例效果图：

点击每个超链接之后，会进行相应的内容切换，如下：

外围思路：
在页面中有一个 vue 实例对象，vue 实例对象中有四个组件，别离是 tab 栏切换须要显示的组件内容
在页面中有四个超链接，如下：

<a href="#/zhuye"> 主页 </a> 
<a href="#/keji"> 科技 </a> 
<a href="#/caijing"> 财经 </a>
<a href="#/yule"> 娱乐 </a>

当咱们点击这些超链接的时候，就会扭转 url 地址中的 hash 值，当 hash 值被扭转时，就会触发 onhashchange 事件
在触发 onhashchange 事件的时候，咱们依据 hash 值来让不同的组件进行显示：

window.onhashchange = function() {
    // 通过 location.hash 获取到最新的 hash 值
    console.log(location.hash);
    switch(location.hash.slice(1)){
        case '/zhuye':
        // 通过更改数据 comName 来指定显示的组件
        // 因为 <component :is="comName"></component>，组件曾经绑定了 comName
        vm.comName = 'zhuye'
        break
        case '/keji':
        vm.comName = 'keji'
        break
        case '/caijing':
        vm.comName = 'caijing'
        break
        case '/yule':
        vm.comName = 'yule'
        break
    }
}

Vue Router

Vue Router 官网: 地址
Vue.js 官网的路由管理器。

3.Vue Router 简介

它是一个 Vue.js 官网提供的路由管理器。是一个性能更加弱小的前端路由器，举荐应用。
Vue Router 官网: 地址
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
})

小结：
Vue Router 的应用步骤还是比拟清晰的，依照步骤一步一步就能实现路由操作

  • A. 导入 js 文件
  • B. 增加路由链接
  • C. 增加路由占位符(最初路由展现的组件就会在占位符的地位显示)
  • D. 定义路由组件
  • E. 配置路由规定并创立路由实例
  • F. 将路由挂载到 Vue 实例中

补充：
路由重定向：能够通过路由重定向为页面设置默认展现的组件
在路由规定中增加一条路由规定即可，如下：

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

5. 嵌套路由，动静路由的实现形式

A. 嵌套路由的概念(★★★)

当咱们进行路由的时候显示的组件中还有新的子级路由链接以及内容。

嵌套路由最要害的代码在于了解子级路由的概念：
比方咱们有一个 /login 的路由
那么 /login 上面还能够增加子级路由，如:
/login/account
/login/phone

嵌套路由用法

父路由组件模板
  • 父级路由链接
  • 父组件路由填充位
<p>
 <router-link to="/user">User</router-link>
 <router-link to="/register">Register</router-link>
 </p>
 <div>
 <!-- 管制组件的显示地位 -->
 <router-view></router-view>
 </div>
子级路由模板
  • 子级路由链接
  • 子级路由填充位
const Register = {
 template: `<div>
 <h1>Register 组件 </h1>
 <hr/>
 <router-link to="/register/tab1">Tab1</router-link>
 <router-link to="/register/tab2">Tab2</router-link>
 <!-- 子路由填充地位 -->
 <router-view/>
 </div>`
 }
嵌套路由配置
  • 父级路由通过 children 属性配置子级路由
const router = new VueRouter({
    routes: [{ path: '/user', component: User},
    {
        path: '/register',
        component: Register,
        // 通过 children 属性，为 /register 增加子路由规定
        children: [{ path: '/register/tab1', component: Tab1},
            {path: '/register/tab2', component: Tab2}
        ]
    }
    ]
 })

参考代码如下：

var User = {template: "<div>This is User</div>"}
//Login 组件中的模板代码外面蕴含了子级路由链接以及子级路由的占位符
    var Login = { 
        template: `<div>
            <h1>This is Login</h1>
                <hr>
                <router-link to="/login/account"> 账号密码登录 </router-link>
                <router-link to="/login/phone"> 扫码登录 </router-link>
                <!-- 子路由组件将会在 router-view 中显示 -->
                <router-view></router-view>
            </div>` 
        }

    // 定义两个子级路由组件
    var account = {template:"<div> 账号：<input><br> 明码：<input></div>"};
    var phone = {template:"<h1> 扫我二维码 </h1>"};
    var myRouter = new VueRouter({
        //routes 是路由规定数组
        routes: [{ path:"/",redirect:"/user"},
            {path: "/user", component: User},
            { 
                path: "/login", 
                component: Login,
                // 通过 children 属性为 /login 增加子路由规定
                children:[{ path: "/login/account", component: account},
                    {path: "/login/phone", component: phone},
                ]
            }
        ]
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router:myRouter
    });

页面成果大抵如下：

B. 动静路由匹配(★★★)

var User = {template:"<div> 用户：{{$route.params.id}}</div>"}
// 路由组件中通过 $route.params 获取路由参数

var myRouter = new VueRouter({
    //routes 是路由规定数组
    routes: [
        // 通过 /: 参数名  的模式传递参数 
        {path: "/user/:id", component: User},
        

    ]
})

补充：
如果应用 $route.params.id 来获取门路传参的数据不够灵便。
1. 咱们能够通过 props 来接管参数

var User = {props:["id"],
    template:"<div> 用户：{{id}}</div>"
    }

var myRouter = new VueRouter({
    //routes 是路由规定数组
    routes: [
        // 通过 /: 参数名  的模式传递参数 
        // 如果 props 设置为 true，route.params 将会被设置为组件属性
        {path: "/user/:id", component: User,props:true},
        
    ]
})

2. 还有一种状况，咱们能够将 props 设置为对象，那么就间接将对象的数据传递给
组件进行应用

var User = {props:["username","pwd"],
    template:"<div> 用户：{{username}}---{{pwd}}</div>"
    }

var myRouter = new VueRouter({
    //routes 是路由规定数组
    routes: [
        // 通过 /: 参数名  的模式传递参数 
        // 如果 props 设置为对象，则传递的是对象中的数据给组件
        {path: "/user/:id", component: User,props:{username:"jack",pwd:123} },
        
    ]
})

3. 如果想要获取传递的参数值还想要获取传递的对象数据，那么 props 应该设置为
函数模式。

var User = {props:["username","pwd","id"],
    template:"<div> 用户：{{id}} -> {{username}}---{{pwd}}</div>"
    }

var myRouter = new VueRouter({
    //routes 是路由规定数组
    routes: [
        // 通过 /: 参数名  的模式传递参数 
        // 如果 props 设置为函数，则这个函数接管 route 对象为本人的形参
        // 通过函数的第一个参数获取路由对象
        // 并能够通过路由对象的 params 属性获取传递的参数
        {    
            path: "/user/:id", 
            component: User,
            props:(route)=>{return {username:"jack",pwd:123,id:route.params.id}
            } 
        },
        
    ]
})

7. 命名路由以及编程式导航

A. 命名路由：给路由取别名

案例：

var myRouter = new VueRouter({
    //routes 是路由规定数组
    routes: [
        // 通过 name 属性为路由增加一个别名
        {path: "/user/:id", component: User, name:"user"},
        
    ]
})

增加了别名之后，能够应用别名进行跳转

<router-link to="/user">User</router-link>
<router-link :to="{name:'user', params: {id:123} }">User</router-link>

还能够编程式导航

myRouter.push({ name:'user' , params: {id:123} } )

B. 编程式导航(★★★)

页面导航的两种形式：
A. 申明式导航：通过点击链接的形式实现的导航

  • 例如：一般网页中的 链接 或 vue 中的 <router-link></router-link>

B. 编程式导航：调用 js 的 api 办法实现导航

  • 例如：一般网页中的 location.href

Vue-Router 中常见的导航形式：

this.$router.push("hash 地址");
this.$router.push("/login");
this.$router.push({name:'user' , params: {id:123} });
this.$router.push({path:"/login"});
this.$router.push({path:"/login",query:{username:"jack"} });

this.$router.go(n);// n 为数字，参考 history.go
this.$router.go(-1);

8. 实现后盾治理案例(★★★)

案例成果：

点击左侧的 ” 用户治理 ”,” 权限治理 ”,” 商品治理 ”,” 订单治理 ”,” 零碎设置 ” 都会呈现对应的组件并展现内容

其中 ” 用户治理 ” 组件展现的成果如上图所示，在用户治理区域中的详情链接也是能够点击的，点击之后将会显示用户详情信息。

案例思路：
1). 先将素材文件夹中的 11. 基于 vue-router 的案例.html 复制到咱们本人的文件夹中。
看一下这个文件中的代码编写了一些什么内容，
这个页面曾经把后盾治理页面的根本布局实现了
2). 在页面中引入 vue，vue-router
3). 创立 Vue 实例对象，筹备开始编写代码实现性能
4). 心愿是通过组件的模式展现页面的主体内容，而不是写死页面构造，所以咱们能够定义一个根组件：

// 只须要把本来页面中的 html 代码设置为组件中的模板内容即可
const app = {
    template:`<div>
        <!-- 头部区域 -->
        <header class="header"> 传智后盾管理系统 </header>
        <!-- 两头主体区域 -->
        <div class="main">
          <!-- 左侧菜单栏 -->
          <div class="content left">
            <ul>
              <li> 用户治理 </li>
              <li> 权限治理 </li>
              <li> 商品治理 </li>
              <li> 订单治理 </li>
              <li> 零碎设置 </li>
            </ul>
          </div>
          <!-- 右侧内容区域 -->
          <div class="content right">
            <div class="main-content"> 增加用户表单 </div>
          </div>
        </div>
        <!-- 尾部区域 -->
        <footer class="footer"> 版权信息 </footer>
      </div>`
  }

5). 当咱们拜访页面的时候，默认须要展现刚刚创立的 app 根组件，咱们能够
创立一个路由对象来实现这个事件, 而后将路由挂载到 Vue 实例对象中即可

const myRouter = new VueRouter({
    routes:[{path:"/",component:app}
    ]
})

const vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:myRouter
})

补充：到此为止，根本的 js 代码都处理完毕了，咱们还须要设置一个路由占位符

<body>
  <div id="app">
    <router-view></router-view>
  </div>
</body>

6). 此时咱们关上页面应该就能够失去一个 VueRouter 路由进去的根组件了
咱们须要在这个根组件中持续路由实现其余的性能子组件
先让咱们更改根组件中的模板：更改左侧 li 为子级路由链接，并在右侧内容区域增加子级组件占位符

const app = {
    template:`<div>
        ........
        <div class="main">
          <!-- 左侧菜单栏 -->
          <div class="content left">
            <ul>
              <!-- 留神：咱们把所有 li 都批改为了路由链接 -->
              <li><router-link to="/users"> 用户治理 </router-link></li>
              <li><router-link to="/accesses"> 权限治理 </router-link></li>
              <li><router-link to="/goods"> 商品治理 </router-link></li>
              <li><router-link to="/orders"> 订单治理 </router-link></li>
              <li><router-link to="/systems"> 零碎设置 </router-link></li>
            </ul>
          </div>
          <!-- 右侧内容区域 -->
          <div class="content right">
            <div class="main-content">
                <!-- 在 -->
                <router-view></router-view> 
            </div>
          </div>
        </div>
        .......
      </div>`
  }

而后，咱们要为子级路由创立并设置须要显示的子级组件

// 倡议创立的组件首字母大写，和其余内容辨别
const Users = {template:`<div>
    <h3> 用户治理 </h3>
</div>`}
const Access = {template:`<div>
    <h3> 权限治理 </h3>
</div>`}
const Goods = {template:`<div>
    <h3> 商品治理 </h3>
</div>`}
const Orders = {template:`<div>
    <h3> 订单治理 </h3>
</div>`}
const Systems = {template:`<div>
    <h3> 系统管理 </h3>
</div>`}

// 增加子组件的路由规定
const myRouter = new VueRouter({
    routes:[
        {path:"/",component:app , children:[{ path:"/users",component:Users},
            {path:"/accesses",component:Access},
            {path:"/goods",component:Goods},
            {path:"/orders",component:Orders},
            {path:"/systems",component:Systems},
        ]}
    ]
})

const vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:myRouter
})

7). 展现用户信息列表：

A. 为 Users 组件增加公有数据, 并在模板中循环展现公有数据
    const Users = {data(){
        return {
            userList:[{id:1,name:"zs",age:18},
                {id:2,name:"ls",age:19},
                {id:3,name:"wang",age:20},
                {id:4,name:"jack",age:21},
            ]
        }
    },
    template:`<div>
        <h3> 用户治理 </h3>
        <table>
            <thead>
                <tr>
                    <th> 编号 </th>
                    <th> 姓名 </th>
                    <th> 年龄 </th>
                    <th> 操作 </th>
                </tr>
            </thead>
            <tbody>
                <tr :key="item.id" v-for="item in userList">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td><a href="javascript:;"> 详情 </a></td>
                </tr>
            </tbody>
        </table>
    </div>`}

8. 当用户列表展现结束之后，咱们能够点击列表中的详情来显示用户详情信息，首先咱们须要创立一个组件，用来展现详情信息

const UserInfo = {props:["id"],
    template:`<div>
      <h5> 用户详情 </h5>
      <p> 查看 {{id}} 号用户信息 </p>
      <button @click="goBack"> 返回用户详情页 </button>
    </div> `,
    methods:{goBack(){
        // 当用户点击按钮，后退一页
        this.$router.go(-1);
      }
    }
  }

而后咱们须要设置这个组件的路由规定

const myRouter = new VueRouter({
    routes:[
        {path:"/",component:app , children:[{ path:"/users",component:Users},
            // 增加一个 /userinfo 的路由规定
            {path:"/userinfo/:id",component:UserInfo,props:true},
            {path:"/accesses",component:Access},
            {path:"/goods",component:Goods},
            {path:"/orders",component:Orders},
            {path:"/systems",component:Systems},
        ]}
    ]
})

const vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:myRouter
})

再接着给用户列表中的详情 a 连贯增加事件

const Users = {data(){
        return {
            userList:[{id:1,name:"zs",age:18},
                {id:2,name:"ls",age:19},
                {id:3,name:"wang",age:20},
                {id:4,name:"jack",age:21},
            ]
        }
    },
    template:`<div>
        <h3> 用户治理 </h3>
        <table>
            <thead>
                <tr>
                    <th> 编号 </th>
                    <th> 姓名 </th>
                    <th> 年龄 </th>
                    <th> 操作 </th>
                </tr>
            </thead>
            <tbody>
                <tr :key="item.id" v-for="item in userList">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td><a href="javascript:;" @click="goDetail(item.id)"> 详情 </a></td>
                </tr>
            </tbody>
        </table>
    </div>`,
    methods:{goDetail(id){this.$router.push("/userinfo/"+id);
        }
    }
}
退出移动版