前端路由的学习

江之岛的猫
145 阅读5分钟

1.路由的基本概念与原理

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

1.1 后端路由

1.1.1 基本概念

  • 需要浏览器和服务器
  • 用户浏览器根据不同的url通过后端路由查找服务器的资源来返回给用户浏览器
  • 所以后端路由本质就是浏览器与服务器资源的对应关系

1.1.2 什么是SPA

  • 后端路由是通过后端渲染页面，存在性能问题
  • 后来出现了Ajax的前端渲染，但不支持页面前进后退功能
  • 所以SPA诞生：Single Page Application
  • 单个页面，内容变化通过Ajax局部更新，支持前进后退功能
  • 其实现原理：基于url地址的hash变化，运用前端路由核心技术

1.2 前端路由

1.2.1 基本概念

  • 是根据用户触发的事件，显示不同的页面内容
  • 用户触发事件通过前端路由找事件处理函数

1.3 前端路由的最最基础的小案例

导入Vue.js https://cdn.jsdelivr.net/npm/vue/dist/vue.js

  • 逻辑：
  • 用Vue，使用4个a链接，href属性是#/zhuye...带hash的地址
  • 用component标签绑定is属性，即绑定组件的名称，名称是哪个就变成哪个组件
  • 点击a链接会发生hash地址的变化，使用window.onhashchange = function(),使用location.hash可以获取当前的hash，当hash变化，就执行function，可用于监听hash
  • 当hash地址变化时，用switch-case改变is属性的名称，即改变data里面被绑定的component的名字，注意要加vm.才能访问Vue实例中的东西，因为你是在完完全全的Vue实例外面使用的，这样就可以实现组件的变化
  • 如何定义组件并注册？
  • 使用const zhuye =一个对象，对象里面是template
  • template后面跟的是''括起来的html语句
  • 注册则要在Vue实例对象的components中注册
  • components冒号后跟一个对象，里面写上定义的时候的名称即可
<body>
    <div id="app">
        <a href="#/zhuye">主页</a>
        <a href="#/yule">娱乐</a>
        <a href="#/caijing">财经</a>
        <a href="#/tiyu">体育</a>
        <component :is="componentName"></component>
    </div>
</body>

<script>
    const zhuye = {
        template: '<h1>主页</h1>',
    }
    const yule = {
        template: '<h1>娱乐</h1>',
    }
    const caijing = {
        template: '<h1>财经</h1>',
    }
    const tiyu = {
        template: '<h1>体育</h1>',
    }
    var vm = new Vue({
        el: '#app',
        data: {
            componentName: 'zhuye'
        },
        methods: {},
        components: {
            zhuye,
            yule,
            caijing,
            tiyu,
        }
    })
    window.onhashchange = function () {
        switch (location.hash) {
            case '#/zhuye':
                vm.componentName = 'zhuye';
                break;
            case '#/yule':
                vm.componentName = 'yule';
                break;
            case '#/caijing':
                vm.componentName = 'caijing';
                break;
            case '#/tiyu':
                vm.componentName = 'tiyu';
                break;
            default:
                break;
        }
    }
</script>
  • 页面截图

1.3 Vue Router

  • Vue Router是Vue.js官方的路由管理器，以后不需要我们自己手动写路由，非常方便SPA应用的开发
  • Vue Router支持很多新功能
  • 支持HTML5历史模式和hash模式
  • 支持嵌套路由
  • 支持路由参数
  • 支持编程式路由
  • 支持命名路由

2.Vue-Router的基本使用

2.1 基本使用步骤

  • 导入vue-router的js包

https://unpkg.com/vue-router@2.0.0/dist/vue-router.js

  • 使用router-link标签，to属性是hash，将来会被渲染为a标签
  • 使用router-view标签，当占位符，被选中的组件会被渲染到此处
<body>
    <div id="app">
        <router-link to="/zhuye">主页</router-link>
        <router-link to="/yule">娱乐</router-link>
        <router-view></router-view>
    </div>
</body>
  • 创建VueRouter实例对象，用VueRouter构造函数，传入的参数是一个对象，对象中有一属性routes，它是一个数组，装着路由规则对象，路由规则对象包括path和component属性，path对应的就是前面的hash
  • 在Vue实例对象中，注册router
  • 同样要定义组件，方法前面已讲，但不需要在Vue实例对象中注册
<script>
    const zhuye = {
        template: '<h1>主页</h1>',
    }
    const yule = {
        template: '<h1>娱乐</h1>',
    }
    const router = new VueRouter({
        routes:[
            {path:'/zhuye',component:zhuye},
            {path:'/yule',component:yule},
        ]
    })
    var vm = new Vue({
        el: '#app',
        data: {
            componentName: 'zhuye'
        },
        methods: {},
        router : router,
    })
</script>

2.2 路由重定向

就是将当前访问的路径重新定义为另外一个路径，使用redirect关键字

  • 在路由匹配规则中，使用redirect
 routes:[
            {path:'/',redirect:'/zhuye'},//此处
            {path:'/zhuye',component:zhuye},
            {path:'/yule',component:yule},
        ]

3.Vue-Router嵌套路由

3.1 嵌套路由用法

就是在路由组件中，还有路由的使用，即父组件中有子组件

  • 在父组件的template里，写上子路由的router-link和router-view
const yule = {
        template: '<div><h1>娱乐</h1><router-link to="/yule/youxi">游戏</router-link><router-link to="/yule/yinyue">音乐</router-link><router-view></router-view></div>',
    }
  • 在父路由的路由匹配规则中，除了path和component，再用children属性加子路由匹配规则，children同样是数组，里面装路由匹配规则
const router = new VueRouter({
        routes: [
            { path: '/', redirect: '/zhuye' },
            { path: '/zhuye', component: zhuye },
            { path: '/yule', component: yule,children:[
                {path:'/yule/youxi',component:yuleyouxi},
                {path:'/yule/yinyue',component:yuleyinyue},
            ] },
        ]
    })

图示：

4.动态路由匹配

4.1 动态匹配路由的基本用法

当hash的前面一样，后面不一样比如/user/1...就可以使用动态匹配路由来解决

        <router-link to="/zhuye/1">主页1</router-link>
        <router-link to="/zhuye/2">主页2</router-link>
        <router-link to="/zhuye/3">主页3</router-link>
  • 在路由匹配规则的path中用:id或其他的可以看作需要改变的hash部分
        { path: '/zhuye/:id', component: zhuye },
  • 这个id可以当作参数用在组件中去，在插值表达式中使用$route.params.id来获取
        const zhuye = {
        template: '<h1>主页----{{$route.params.id}}</h1>',
    }

4.2 路由组件传递参数

上面传递参数使用的是$route.params.id,但这种方法与路由过于耦合

  • 在路由匹配规则里使用新属性，即props属性
  • 同样是利用:id来传参

4.2.1 props的值是bool类型

 { path: '/zhuye/:id', component:zhuye, props:true},
  • 在组件对象属性中，除了template，还可以加一个props属性，它是一个数组，装有名字是参数名字的字符串'id'
  • 之后在组件中使用就可直接在插值表达式中用props的东西了
const zhuye = {
        props: ['id'],
        template: '<h1>主页----{{ id }}</h1>',
    }

4.2.3 props的值为对象类型

  • 将props的值改为对象，里面可以放多个属性
{ path: '/zhuye/:id', component:Zhuye, props:{uname:"djp",age:11}},
  • 在组件的props属性数组中加入放的属性，同样是字符串
var Zhuye = {
        props:['uname','age'],
        template: '<h1>主页---{{uname}}--{{age}}</h1>',
    }

4.2.3 props的值为函数类型

  • 将props的值改为一个箭头函数
{ path: '/zhuye/:id', component:Zhuye, props:route=>({
                uname:'djp',
                age:12,
                id:route.params.id,
            })},
  • 通过route.params.id使用动态参数id
  • 组件中就可以使用静态以及动态的参数了

5.Vue-Router命名路由

5.1命名路由的配置规则

  • 在路由匹配规则中添加name属性即为命名路由
 routes: [
            {
                name: 'user',
                path: '/zhuye/:id',
                component: Zhuye,
                props: route => ({ uname: 'zs', age: 20, id: route.params.id })
            },
        ]
  • 把router-link的to用:绑定一个对象，用双引号括起来，对象有属性name和params，params是个对象，里面用来传递url里/:id类似的动态参数的
 <router-link :to="{ name: 'user', params: {id: 3} }">
            主页
        </router-link>

6.vue-router编程式导航

6.1 页面导航的两种方式

  • 声明式导航
  • 点击链接实现导航 例如a链接或者router-link
  • 编程式导航
  • 通过调用JavaScript的API实现导航 例如普通网页的location.href

6.2 编程式导航基本用法

  • 常用的编程式导航API是
  • this.$router.push('hash地址')
  • this.$router.go(数字)
  • 例如 按按钮实现导航跳转
  • 首先创建按钮并用@绑定click点击事件，点击触发某函数方法
  • 此函数方法在组件的methods中定义
  • 方法体就是this.$router.push()或go()
avatar
文章
阅读
粉丝