vue2.0——路由

最新推荐文章于 2024-02-20 11:44:39 发布
最新推荐文章于 2024-02-20 11:44:39 发布
阅读量562 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H1069495874/article/details/64904927
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <script src="../js/Vue.js"></script>
    <script src="../js/vue-router.min.js"></script>
</head>
<body>
    <div id="box">
        <div>
            <router-link to="/home">这是主页</router-link>
            <router-link to="/news">这是新闻页</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script>
        //定义组件
        var Home = {
            template:'<h2>主页详情页</h2>'
        };
        var News = {
            template:'<h2>新闻页详情页</h2>'
        };

        //配置路由
        const routes = [
            {path:'/home',component:Home},
            {path:'/news',component:News},
            //重定向
            {path:'/',redirect:'/home'},
        ];

        //生成路由实例
        const router = new VueRouter({
            routes
        });

        //加载实现
        new Vue({
            router,
            el:'#box'
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <script src="../js/Vue.js"></script>
    <script src="../js/vue-router.min.js"></script>
</head>
<body>
    <div id="box">
        <div>
            <router-link to="/home">这是主页</router-link>
            <router-link to="/news">这是新闻页</router-link>
            <router-link to="/user">这是用户页</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script>
        //定义组件
        var Home = {
            template:'<h2>主页详情页</h2>'
        };

        var News = {
            template:'<h2>新闻页详情页</h2>'
        };

        var user = {
            template:'<h2>用户页详情页</h2>'
        };

        var User = {
            template:`
                <div>
                    <h3>这是用户信息</h3>
                    <ul>
                        <li>
                            <router-link to="/user/username">某个用户</router-link>
                        </li>
                    </ul>
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
            `
        };

        var UserDetail={
            template:`
                <div>
                    这是XX用户
                </div>
            `
        };

        //配置路由
        const routes = [
            {path:'/home',component:Home},

            {path:'/news',component:News},
            {path:'/user',component:User},
            {
                path:'/user',
                component:User,
                children:[
                    {path:'username', component:UserDetail}
                ]
            },
            //重定向
            {path:'*',redirect:'/home'},
        ];

        //生成路由实例
        const router = new VueRouter({
            routes
        });

        //加载实现
        new Vue({
            router,
            el:'#box'
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <script src="../js/Vue.js"></script>
    <script src="../js/vue-router.min.js"></script>
</head>
<body>
    <div id="box">
        <div>
            <router-link to="/home">这是主页</router-link>
            <router-link to="/news">这是新闻页</router-link>
            <router-link to="/user">这是用户页</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script>
        //定义组件
        var Home = {
            template:'<h2>主页详情页</h2>'
        };

        var News = {
            template:'<h2>新闻页详情页</h2>'
        };

        var user = {
            template:'<h2>用户页详情页</h2>'
        };

        var User = {
            template:`
                <div>
                    <h3>这是用户信息</h3>
                    <ul>
                        <li>
                            <router-link to="/user/jack/age/10">jack</router-link>
                            <router-link to="/user/jony/age/15">jony</router-link>
                            <router-link to="/user/jeey/age/18">jeey</router-link>
                        </li>
                    </ul>
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
            `
        };

        var UserDetail={
            template:`
                <div>
                    {{$route.params}}
                </div>
            `
        };

        //配置路由
        const routes = [
            {path:'/home',component:Home},

            {path:'/news',component:News},
            {path:'/user',component:User},
            {
                path:'/user',
                component:User,
                children:[
                    {path:':username/age/:age', component:UserDetail}
                ]
            },
            //重定向
            {path:'*',redirect:'/home'},
        ];

        //生成路由实例
        const router = new VueRouter({
            routes
        });

        //加载实现
        new Vue({
            router,
            el:'#box'
        });
    </script>
</body>
</html>
阁下长得好生俊俏
关注
专栏目录
初学Vue2.0——前端路由
weixin_46548238的博客
09-12 233
一、路由的概念与原理 1. 什么是前端路由？ 前端路由就是：哈希地址（锚链接）与组件之间的对应关系。 哈希地址：url里面＃及其以后的地址叫做哈希地址 要想获取到哈希地址，使用location.hash方法。 2. 前端路由的工作方式 前端路由的工作方式： 用户点击了页面上的路由链接； 导致了URL地址栏中的Hash值发生了变化； 前端路由监听到了Hash地址的变化； 前端路由把当前Hash地址对应的组件渲染到浏览器中。 3. 前端路由的底层原理 前端路由的底层原理是：监听了浏览器的onhashch
html5使用vue路由,Vue2.0笔记——vue-router路由
weixin_32535637的博客
06-17 1297
简介使用Vue.js开发SPA(Single Page Application)单页面应用。vue-router可以通过html5的history API或者hash实现单页应用，即不刷新跳转，切换地址，只是页面上的组件的切换；vue-router可以实现页面间传参等其他功能；基本用法当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)...
VUE2.0——组件内的路由守卫
HarryHY的博客
11-30 666
在你想要使用的组件内使用 在beforeRouteEnter中不能直接使用this获取到组件内的方法和data 通过使用这个vm来获取了 我这里的使用场景是面包屑 然后进行了一个to from的匹配 beforeRouteEnter(to, from, next) { next((vm) => { switch (from.name) { case "Home": vm.fromname.name = "首页"; vm.f
vue2.0——第七天（前端路由的概念与原理、vue-router 的基本使用、vue-router 的常见用法、后台管理案例）
weixin_48137421的博客
07-26 394
前端路由的概念与原理、vue-router 的基本使用、vue-router 的常见用法、后台管理案例
Vue2.0——修改路由模式(history)
HarryHY的博客
11-30 2557
在你的router里面的index.js中 new Router中添加 这个base可根据你的具体情况修改即可 mode: 'history', base: '/front/',
VUE2.0——绑定动态id名 or class名
HarryHY的博客
12-31 1544
html <div class="lookAllreply" :id="forId(item.id)"> </div> JS forId(id) { return `f${id}` },
67.vue2.0学习 —— vuex
Kylincsg的博客
02-20 866
专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
初试 vue2.0——7.项目开发_路由重定向
dinan9786的博客
02-28 111
写在前面的话： 　　在vue1.0中的方式（貌似使用的是 go），在2.0中不太一样了。 做法：在index.js中，加入 redirect配置即可。 1 import Vue from 'vue' 2 import Router from 'vue-router' 3 import goods from 'router/goods/goods' 4 impo...
Vue2.0—— 搭建Vue脚手架（vue-cli）及创建项目
milli236的博客
07-13 3681
一、那么我们就从最简单的环境搭建开始： 安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。 这里需要说明下，因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意
管理系统系列--Vue2.0+Vue-router+ElementUI实现的后台管理系统模板.zip
最新发布
02-25
【标题】：“管理系统系列--Vue2.0+Vue-router+ElementUI实现的后台管理系统模板”是一个基于现代前端技术栈构建的后台管理应用框架。这个框架使用了Vue.js的2.0版本，Vue-router进行页面路由管理和ElementUI作为...
vue2.0 实现导航守卫的具体用法（路由守卫）
12-09
在Vue 2.0中，路由管理库vue-router提供了一种强大的机制——导航守卫（Navigation Guards），用于在路由变化时执行特定的操作，例如验证用户权限、数据预加载等。导航守卫允许开发者在路由跳转前、后或在组件实例...
vue2.0_路由守卫——登录权限设置（ 以vue router.beforeEach()为例 ）
QiuRenBB的博客
02-18 6450
前言： 什么是路由守卫？   官方的说法：   导航守卫(路由守卫)主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的、单个路由独享的、或者组件级的。   我方的说法：   路由守卫是指对路由跳转前做一些验证或者说操作一些事儿，目的是为了实现某些效果。比如没有登录的情况下，就不能进入到首页或者其它页面，只有登录了之后才有权限进入。简单讲就是路由拦截 、设置权限。 讲解前：为了方便理解，我先贴一张钩子函数的执行顺序图。先讲解一下路由守卫的组成和各个钩子的理解与应用，登录权限设置放在最后
vue事件对象、冒泡、阻止默认行为
热门推荐
小牛牛的博客
02-15 2万+
事件对象<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = fun
Vue监听数据变化
小牛牛的博客
02-17 1万+
浅度监听<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义键盘信息</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scala
Vue键盘事件
小牛牛的博客
02-15 1万+
键盘事件<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = fun
vue POST交互
小牛牛的博客
02-15 9715
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>post交互</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
Vue防止花括号闪烁
小牛牛的博客
02-17 6532
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
Vue自定义指令-拖拽
小牛牛的博客
02-17 5831
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值