提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue 路由

Vue路由
2023-06-13 09:14:40 时间

前端路由

什么是单页应用

单页应用(single page web application，SPA)，是在一个页面完成所有的业务功能，浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面完成，这一切都由JavaScript来控制。

单页应用优缺点

  • 优点
    • 操作体验流畅
    • 完全的前端组件化
  • 缺点
    • 首次加载大量资源(可以只加载所需部分)
    • 对搜索引擎SEO不友好 -> 服务端渲染
    • 开发难度相对较高

单页应用的实现原理

前后端分离(后端专注于数据、前端专注于交互和可视化)+前端路由

Hash路由

  • 利用URL上的hash，当hash改变不会引起页面刷新，所以可以利用 hash 值来做单页面应用的路由， 并且当 url 的 hash 发生变化的时候，可以触发相应 hashchange 回调函数。
  • 模拟实现: 
<a href="#/">首页</a>
<a href="#/users">用户管理</a>
<a href="#/rights">权限管理</a>
<a href="#/goods">商品管理</a>
<div id="box">
    </div>
<script>
    var box = document.getElementById('box');
window.onhashchange = function() {
    // #/users
    var hash = location.hash;
    hash = hash.replace('#', '');
    switch (hash) {
        case '/':
            box.innerHTML = '这是首页';
            break;
        case '/users':
            box.innerHTML = '这是用户管理';
            break;
        case '/rights':
            box.innerHTML = '这是权限管理';
            break;
    }
};
</script>

History路由

  • History 路由是基于 HTML5 规范，在 HTML5 规范中提供了 history.pushState || history.replaceState 来进行路由控制

vue-router

Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌 实现根据不同的请求地址 而显示不同的组件

快速体验

导入vue和vue-router

设置HTML中的内容

<!-- router-link 最终会被渲染成a标签，to指定路由的跳转地址 -->
<router-link to="/users">用户管理</router-link>
​
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

创建组件

// 创建组件
// 组件也可以放到单独的js文件中
var Home = {
    template: '<div>这是Home内容</div>'
};
var Users = {
    template: '<div>这是用户管理内容</div>'
};

配置路由规则

// 配置路由规则
var router = new VueRouter({
    routes: [
        { name: 'home', path: '/', component: Home },
        { name: 'users', path: '/users', component: Users }
    ]
});

设置vue的路由选项

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

动态路由

场景: 不同的path对应同一个组件

注意: 变化的路由 改成 :参数

此时可以通过路由传参来实现，具体步骤如下：

路由规则中增加参数，在path最后增加 :id

{ name: 'users', path: '/users/:id', component: Users },

通过 传参，在路径上传入具体的值

<router-link to="/users/120">用户管理</router-link>

在组件内部可以使用，this.$route 获取当前路由对象

var Users = {
    template: '<div>这是用户管理内容 {{ $route.params.id }}</div>',
    mounted() {
        console.log(this.$route.params.id);
    }
};

路由嵌套

如果存在组件嵌套,就需要提供多个视图容器 同时,router-link和router-view 都可以添加类名、设定样式 

<div id="app">
    <!--router-link运行后会自动变成a标签-->
    <nav>
        <router-link to="/top">热点</router-link>
        <router-link to="/tech">教育</router-link>
        <router-link to="/soc">社会</router-link>
        <router-link to="/mus">音乐</router-link>
        <router-link to="/te">体育</router-link>
    </nav>
​
    <!--容器-->
    <router-view class="box">
    </router-view>
</div>
​
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
    // 组件:
​
    // 热点
    var Top = {
        template: '<h1>Top</h1>'
    };
​
    // 体育:带参数的二级路由
    var Te = {
        template: `
<div>
<ul>
<li><router-link to='/te/basb/10'>篮球</router-link></li>
<li><router-link to='/te/fotb/10'>足球</router-link></li>
<li><router-link to='/te/mbal/10'>好多球</router-link></li>
    </ul>
<router-view class="box"></router-view>
    </div>
`
    };
​
    // 教育:使用了data
    var Tech = {
        data: function() {
            return {
                name: "luck",
                age: 10,
                fn: function() {
                    alert(1);
                }
            }
        },
        template: `
<div>
<p @click="fn">{{name}}</p>
<p>{{age}}</p>
    </div>
`
    }
​
    // 社会
    var Soc = {
        template: '<h1>soc</h1>'
    };
​
​
    // 音乐:不带参数的二级路由
    var Mus = {
        // template: '<h1>mus</h1>'
        template: `
<div>
<ul>
<li><router-link to='/mus/pop'>流行</router-link></li>
<li><router-link to='/mus/tra'>古典</router-link></li>
<li><router-link to='/mus/roc'>摇滚</router-link></li>
    </ul>
<router-view class="box"></router-view>
    </div>
`
    };
​
    // 音乐:二级路由的视图
    var Pop = {
        template: '<h3>mus下的pop模块</h3>'
    };
​
    // 体育:二级路由的视图
    var Ball = {
        //路由参数 $route.params
        template: "<h3>{{$route.params}}</h3>"
    };
​
    // 配置路由
    var routes = [
        // 热点
        {
            path: '/top',
            component: Top
        },
        // 教育
        {
            path: '/tech',
            component: Tech
        },
        // 社会
        {
            path: '/soc',
            component: Soc
        }, {
            path: '/mus',
            component: Mus,
            //子路由配置
            children: [{
                path: 'pop',
                component: Pop,
            }]
        },
        // 体育
        {
            path: '/te',
            component: Te,
            children: [{ // /te/形参/10
                path: ':cate/10',
                component: Ball
            }]
        },
​
        //重定向:默认或者404界面 
        {
            path: '*',
            redirect: '/top'
        }
    ];
​
    // 实例化路由
    var router = new VueRouter({
        // routes : routes
        routes
    });
​
    // 实例化vue
    var vue = new Vue({
        el: '#app',
        // router : router
        router
    });
</script>

相关文章