路由页面导航

最新推荐文章于 2024-05-01 06:00:24 发布
最新推荐文章于 2024-05-01 06:00:24 发布
阅读量289 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40060410/article/details/78265700
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.3.0.js"></script>
    <script src="angular-route.js"></script>
<body ng-app='routeDemo'>
<!--左边栏-->

<div id="navigator">
    <!--菜单-->
    <table style=" width: 250px; height: 40px; margin: auto;">
        <tr>
            <td><a href="#/home">商品列表</a></td>
            <td><a href="#/woman">用户信息</a></td>
            <td><a href="#/man">地址信息</a></td>

        </tr>
    </table>

</div>
<!--下边栏-->
<div style="width: 300px;display: inline-block;height: 400px;">
    <div ng-view="" ></div>
</div>
</body >

    <script type="text/ng-template" id="index.home.html">
      <ul  style="list-style-type:none;margin: auto;">
        <li>外星人</li>
        <li>联想</li>
        <li>三星</li>
        <li>苹果</li>
      </ul>
    </script>
    <script type="text/ng-template" id="index.woman.html">
        <ul  style="list-style-type:none; margin: auto;">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
        </ul>
    </script>
    <script type="text/ng-template" id="index.man.html">
        <ul  style="list-style-type:none; margin: auto;">
        <li>上地一街</li>
        <li>上地二街</li>
        <li>上地三街</li>
        <li>上地四街</li>
        </ul>
    </script>

    <script type="text/javascript">
        angular.module('routeDemo',['ngRoute'])
            .controller('HomeController',function ($scope,$route) {
                $scope.$route = $route;
            })
            .controller('WomanController',function ($scope,$route) {
                $scope.$route = $route;
            })
            .controller('WomanController',function ($scope,$route) {
                $scope.$route = $route;
            })
            .controller('ManController',function ($scope,$route) {
                $scope.$route = $route;
            })


            //配置$routeProvider用来定义路由规则
            //$routeProvider为我们提供了when（path，object）& other(object)函数按顺序定义所有路由，函数包含两个参数：
            //@param1:url或者url正则规则
            //@param2：路由配置对象
            .config(function($routeProvider){
                $routeProvider.
                when('/home',{
                    //templateURL：插入ng-view的HTML模板文件
                    templateUrl:'index.home.html',
                    controller:'HomeController'

                }).
                when('/woman',{
                    templateUrl:'index.woman.html',
                    controller:'WomanController'
                }).
                when('/man',{
                    templateUrl:'index.man.html',
                    controller:'ManController'
                })

            })
    </script>

</html>
对你微笑纯属礼貌16
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在vue中实现某一些路由页面隐藏导航栏的功能操作
10-14
本文将详细讲解如何在Vue中实现某些特定路由页面隐藏导航栏的功能。 首先，Vue Router是Vue.js官方提供的路由管理库，它允许我们轻松地管理和控制应用程序的路由。默认情况下，我们可以在`<router-view>`组件中放置...
使用VueRouter实现标签页路由导航功能
yeshuboss的博客
01-18 2700
后台管理通常有非常多的管理页面，这些页面通常要组合使用，适用标签加导航的方式可以极大优化用户体验；文章介绍如何使用Vue3+ElementPlus+VueRouter实现标签页路由功能。
Vue中的路由导航
故常无，欲以观其妙；常有，欲以观其徼；
04-19 741
<h1>用户组件</h1><p>{{$route.params}}</p></div>''<div><h1>登陆组件</h1><p>{{$route.query}}</p></div>''<div><h1>注册组件</h1><p>{{$route.query}}</p></div>''<div><h1>登陆页面</h1>
Vue的路由导航
weixin_58032613的博客
01-12 4195
一、要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题 二、vue-router是什么 这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是
react中的路由导航
Zy000428的博客
01-11 1689
路由导航（Route Navigation）是指在Web应用程序中，由用户操作或程序自动触发，切换和加载不同的路由（Route）或页面（Page）的过程。在单页应用（Single-Page Application, SPA）中，路由导航通常是通过浏览器的URL地址实现的。通过在URL中指定不同的路径和参数，可以导航到不同的路由或页面，以提供个性化和动态化的用户体验。在前端框架中，常见的路由导航实现包括：1. 静态路由导航：直接通过路由的链接或点击事件进行导航。
【Flutter——路由导航】
muzillll的博客
06-25 2410
Flutter路由导航
vue-router路由与页面间导航实例解析
08-28
Vue Router 路由与页面间导航实例解析 Vue Router 是一个插件，需要在 Vue 的全局引用中通过 Vue.use() 将它引用到 Vue 实例当中。Vue Router 是 Vue.js 官方的路由插件，它和 Vue.js 是深度集成的，适合用于构建单...
微信小程序页面路由demo
04-24
页面路由是小程序中一个核心的概念，它关乎着用户在小程序内的导航流程。在这个"微信小程序页面路由demo"中，我们将深入探讨这一主题。 首先，我们要理解什么是页面路由。在计算机科学中，路由通常指的是网络数据包...
【Vue3】 Vue-Router路由和路由导航守卫
weixin_44899940的博客
08-22 5699
Vue-Router路由，编程式导航，动态路由，路由导航守卫
路由导航分析和三后台框架路由导航横向对比（没写完）
s8806479的博客
03-13 353
。
路由导航总结
rainbowyx的博客
06-15 353
【1】this.$router是路由的导航对象 提供了如下方法： 1）this.$router.push('hash地址')：跳转到指定的hash地址并增加一条历史记录 使用方法：在组件里面添加一个按钮，然后给按钮添加点击事件，在点击事件里面设置this.$router.push('hash地址')即可跳转到对应的hash地址界面 2）this.$router.replace('hash地址')：跳转到指定的hash地址并不增加一条历史记录，使用方法同上。 3）this.$router.g
Vue路由及导航
qq_41743601的博客
08-15 736
Vue导航及路由用法 文章目录Vue导航及路由用法1.常见的两种导航1.1声明式导航：1.2编程式导航2.常见的几种路由2.1命名路由2.2动态路由匹配2.3嵌套路由匹配3.命名视图4.嵌套命名视图5.重定向和别名5.1常见的几种重定向方式5.2路径别名 1.常见的两种导航 1.1声明式导航： 该方法主要用于定义导航链接，然而有时候我们需要用代码动态改变链接，就需要用到下面这种编程式导航了。 1.2编程式导航 在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.
Vue路由守卫
KongYue1202的博客
10-20 862
Vue路由守卫 全局守卫代码： main.js页面： to是要去的页面，from是要离开的，next是个函数，否则就展示哪个页面 const auth = { isLogin () { return false } } // 全局守卫 router.beforeEach((to, from, next) => { // console.log(to) if (to.path === '/more') { console.log('盘查') if (au
Vue-详解设置路由导航的两种方法，2024年最新推荐学习
2401_84139924的博客
04-11 924
to apple// 命名路由to apple//直接路由带查询参数query，地址栏变成 /apple?color=redto apple// 命名路由带查询参数query，地址栏变成/apple?color=redto apple//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略to apple// 命名路由带路由参数params，地址栏是/apple/redto apple同样的规则也适用于router.push(…)方法。
一个开源的Vue大屏数据展示组件库(1)
最新发布
2401_84447233的博客
05-01 457
数据尚未加载完成时，可以显示Loading效果，增强用户体验。Loading…边框均由SVG元素绘制，体积轻量不失真，使用极为方便。你可以使用装饰去点缀你的页面，以增强视觉效果，与边框组件相同，他们也是用SVG元素绘制的。66%基本示例设置一个中心点，若干飞线点，即可得到动态飞线图，组件提供的dev模式可以帮你快速配置飞线点位置。增强版飞线图。
Vue学习第31天——编程式路由导航5种方法详解及案例练习（与声明式路由导航对比）
背心的博客
09-24 2259
编程式路由导航5种方法详解及案例练习（与生命式路由导航对比）
Vue的路由（导航）
王小涵的笔记的博客
09-25 294
关于vue的路由（导航）的知识的学习，重点学习vue路由传参。
vue导航守卫以及扩展和区别
lk19910323的博客
04-22 1090
路由的导航守卫 又叫做路由的钩子函数（生命周期函数） 就是在跳转页面的 时候把 路由拦下来 做一些操作 再放行 一共有三种 第一种是全局守卫 beforeEach 路由进入之前 afterEach 路由进入之后 第二种 组件内守卫 beforeRouteEnter 路由进入之前 beforeRouteUpdate 路由更新之前 beforeRouteLeave 路由离开之前 第三种 独享守卫 beforeEnter 路由进入之前 有三个参数 to from nex
Vue声明式路由导航和编程式路由导航的优缺点及实现方法
什么都干的派森
05-28 6062
文章目录前言路由实现1.目标2.前置条件3.声明式路由导航实现<1>写路由组件<2>写路由文件<3>实现路由<4>测试4.编程式路由导航实现 前言 声明式路由导航 直接写在html中，结构简单使用方便，但是只能放在<router-link>标签中使用，<router-link>标签会将路由转成<a>标签，通过点击跳转路由，因此局限性也非常大 编程式路由导航 需要写在js中，结构也不算复杂，优势在于非常灵活，不受固定
vue3.0中如何进行路由页面导航，通俗一点的讲法
07-11
下面是一个通俗的讲法来进行Vue 3.0中的路由页面导航： 1. 首先，你需要安装Vue Router。你可以通过npm或者yarn来安装它。在你的项目根目录下运行以下命令安装Vue Router： ```shell npm install vue-router ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值