Vue 路由基础

后端路由

根据不同的用户url请求，返回不同的内容

本质是url请求和服务器资源的对应关系

路由与SPA

后端渲染导致频繁刷新，导致性能问题

ajax技术可以进行前端渲染，但是不支持前进后退操作

单页应用(SPA, Single Page Application)可以同时通过ajax进行单页局部渲染且允许用户使用浏览器的前进或者后退

SPA的实现原理之一：利用基于URL的hash：每个hash绑定对应的浏览记录

前端路由是SPA的核心

前端路由

根据不同的用户事件请求，返回不同的内容

本质是事件请求和服务器资源的对应关系，它负责事件监听，根据事件调取对应的事件函数

Vue-router

支持HTML5的历史模式和hash模式

支持嵌套路由

支持路由传参

支持编程式路由

支持命名路由

vue-router静态的基本使用

创建一个 new VueRouter()
里面注册路由地址，每个地址对应一个component 如：routes(路由规则): [{path: /address1, component: c1}, {path: /address1, component: c1}, ...]
页面中创建 router-link标签，它最终会默认转化为 a 标签，其中的to属性指向你想要加载的component的path
页面中创建 router-view标签，作为填充区域，用于显示你要加载的内容
如果想要重定向，可以将 routes的component 改为 redirect: other path
想要嵌套路由，即路由返回的结果中还有子级路由，可以先定义自己路由为组件，然后再VueRouter的规则里面添加children子规则

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Router</title>
    <script src='../vue.js'></script>
    <script src='../vue-router.js'></script>
</head>
<body>
    <div id="app">
        <!-- router-link默认会被渲染为a标签 -->
        <!-- 属性会被渲染为 href属性，属性的值会被渲染为#开头的hash地址 -->
        <router-link to='/user'>用户</router-link>
        <router-link to='/match'>赛事</router-link>

        <!-- 显示路由返回内容的区域 -->
        <router-view>
        </router-view>
    </div>
</body>
<script>
    const User = {
        template: `'
        <div>
        <h1>User</h1>
        <hr>
        <router-link to='/user/name'>用户名</router-link>
        <router-link to='/user/sex'>性别</router-link>
        <router-view>
        </router-view>
        </div>
        `
        ,
    };
    const Match = {
        template: '<h1>Match</h1>',
    };
    const Home = {
        template: '<h1>Home</h1>'
    }
    const Name = {
        template: '<h3>蛤蛤</h3>'
    }
    const Sex = {
        template: '<h3>辣妹子</h3>'
    }


    //创建路由实例
    let router = new VueRouter({
        routes: [
            {path: '/', redirect: '/home'},
            {path: '/user', component: User, children: [
                {path: '/user/name', component: Name},
                {path: '/user/sex', component: Sex}
            ]},
            {path: '/match', component: Match},
            {path: '/home', component: Home}
        ],
    });

    const app =new Vue({
        el: '#app',
        data: {},
        router: router,
    });
</script>
</html>

动态路由的使用方法

$route.params.attr 传参， attr为route里面定义的属性 :attr

父传子方式 routes里面对象添加 props: true, 然后给组件添加[‘attr]，动态接收attr，如city路由

或者 props也可以直接传递 {attr1: a, attr2: b}，子组件接收方式相似，但是path中原有的:attr就不回传到组件中

所以可以给props赋值为一个匿名函数 route=>{{...}}, 如host路由

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Router</title>
    <script src='../vue.js'></script>
    <script src='../vue-router.js'></script>
</head>
<body>
    <div id="app">
        <!-- router-link默认会被渲染为a标签 -->
        <!-- 属性会被渲染为 href属性，属性的值会被渲染为#开头的hash地址 -->
        <router-link to='/user'>用户</router-link>
        <router-link to='/match/1'>赛事1</router-link>
        <router-link to='/match/2'>赛事2</router-link>
        <router-link to='/match/3'>赛事3</router-link>
        <router-link to='/city/1'>城市1</router-link>
        <router-link to='/city/2'>城市2</router-link>
        <router-link to='/host/1'>举办方1</router-link>
        <router-link to='/host/2'>举办方2</router-link>



        <!-- 显示路由返回内容的区域 -->
        <router-view>
        </router-view>
    </div>
</body>
<script>
    const User = {
        template: `'
        <div>
        <h1>User</h1>
        <hr>
        <router-link to='/user/name'>用户名</router-link>
        <router-link to='/user/sex'>性别</router-link>
        <router-view>
        </router-view>
        </div>
        `
        ,
    };
    const Match = {
        template: '<h1>Match - id是{{$route.params.id}}</h1>',
    };
    const Home = {
        template: '<h1>Home</h1>'
    }
    const Name = {
        template: '<h3>蛤蛤</h3>'
    }
    const Sex = {
        template: '<h3>辣妹子</h3>'
    }
    const City = {
        props: ['cid'],
        template: '<h1>City: {{cid}}</h1>',
    };
    const Host = {
        props: ['hid','name'],
        template: '<h1>host: {{hid}}, {{name}}</h1>',
    }

    //创建路由实例
    let router = new VueRouter({
        routes: [
            {path: '/', redirect: '/home'},
            {path: '/user', component: User, children: [
                {path: '/user/name', component: Name},
                {path: '/user/sex', component: Sex}
            ]},
            {path: '/match/:id', component: Match},
            {path: '/home', component: Home},
            {path: '/city/:cid', component: City, props: true},
            {path: '/host/:hid', component: Host, props: route=>{return {hid: route.params.hid, name: '奥林匹克'}}}
        ],
    });

    const app =new Vue({
        el: '#app',
        data: {},
        router: router,
    });
</script>
</html>

命名路由：在路由规则中添加name属性

<router-link :to='{name: "match", params: {id: 3}}'>赛事3</router-link>
...
routes: {name:'match', path: '/match/:id', component: Match},

编程式路由

router.push('/path'); 直接传递地址并跳转

router.push({path:'/path', params: {id:10,}}); 接收路由规则对象并跳转

router.push({path:'/path', query: {id:10,}}); 接收路由规则，将其转换为'/path?id=10' 并跳转

router.go(-n); 后退n页

router.go(n); 前进n页

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <script src='../vue.js'></script>
    <script src='../vue-router.js'></script>
</head>
<body>
    <div id="app">
        <!-- router-link默认会被渲染为a标签 -->
        <!-- 属性会被渲染为 href属性，属性的值会被渲染为#开头的hash地址 -->

        <router-link to='/match/1'>赛事1</router-link>
        <router-link to='/match/2'>赛事2</router-link>

        <!-- 显示路由返回内容的区域 -->
        <router-view>
        </router-view>
    </div>
</body>
<script>

    const Match = {
        template: `
        <div>
        <h1>Match - id是{{$route.params.id}}</h1>
        <button @click="goRegister">注册</button>
        </div>
        `,
        methods:{
            goRegister(){
                this.$router.push('/register');
            }
        }
    };
    const Register = {
        template: `
        <div>
            <h1>注册吧</h1>
            <button @click="goBack">后退</button>
        </div>
           `,
        methods: {
            goBack(){
                this.$router.go(-1);
            }
        }
    };


    //创建路由实例
    let router = new VueRouter({
        routes: [
            {name:'match', path: '/match/:id', component: Match},
            {path: '/register', component: Register},
        ],
    });

    const app =new Vue({
        el: '#app',
        data: {},
        router: router,
    });
</script>
</html>

posted @ 2021-01-15 18:49 SvenWayne 阅读(81) 评论(0) 收藏举报

刷新页面返回顶部

SvenWayne

一个笔记本。