33-路由设置对象

最新推荐文章于 2024-04-21 21:26:48 发布
最新推荐文章于 2024-04-21 21:26:48 发布
阅读量325 收藏
点赞数
分类专栏： angularJS 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gc_20160403/article/details/76549762
版权 
<!-- 
路由设置对象

AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

路由配置对象语法规则如下：

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

参数说明：

    template:

    如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

    .when('/computers',{template:'这是电脑分类页面'})

    templateUrl:

    如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

    $routeProvider.when('/computers', {
        templateUrl: 'views/computers.html',
    });

    以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

    controller:

    function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

    controllerAs:

    string类型，为controller指定别名。

    redirectTo:

    重定向的地址。

    resolve:

    指定当前controller所依赖的其他模块。

-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>


</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> Home </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
      <h1> About </h1>
  </script>

  <div> 
    <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>

    <div ng-view="">
    </div>
  </div>
</body>
</html>
jojo999888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 路由对象属性
01-07
一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。 this.$route.query 类型: Object 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 this.$...
vue-router为激活的路由设置样式操作
10-15
这个方法通常在组件的`methods`对象中定义，它会检查当前路由路径与传入参数的匹配情况： ```javascript methods: { isActive(path) { return this.$route.path === path; } } ``` 另一种设置激活样式的方法是...
React Router 6 中的 6 种路由配置方式：数组、代码分割、对象、函数和服务器加载
最新发布
笔记、经验、日常分享
04-21 1878
React Router 6 是一个强大的路由库，提供了多种配置路由的方式，可以满足不同的应用场景和需求。如可以使用 createBrowserRouter 或 createHashRouter 函数，以数组形式定义嵌套路由、使用 useRoutes hook 和 React.createElement，可以在函数组件中动态创建路由配置对象，实现高度灵活和可编程的路由配置。实现类似VueRouter路由的配置方式。
Vue的路由对象
zyzhan
10-19 1830
1、路由对象含义 一个路由对象（route object）表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录（route records）。 路由对象是不可变的，每次成功的导航都会产生一个新的对象。 2、 路由对象的使用（慢慢熟悉） 在组件内，即this.$route; 在$route观察者回调内； router.match(location)的返回值; 导航守卫的参数： router.beforeEach((to, from, next
AngularJS 路由配置对象
IT666DHW的博客
10-18 359
html> html> head> meta charset="UTF-8"> title>AngularJS 路由配置对象title> style type="text/css"> /* 可以利用CSS的伪类实现： a:link，定义正常链接的样式； a:visited，定义已访问过链接的样式；
vue-router路由信息对象属性
哒哒哒
07-02 7141
vue路由对象为this.$route，下面详细列一下该对象属性的详细信息属性名类型读写说明$route.pathstaring只读当前路由的名字(一般为#后面的部分,但不包含query查询值)如：http://example.com/#/login?name=aathis.$route.path; //输出“/login”$route.queryobject只读可访问携带的查询参数如：th...
路由的配置
janna1229的博客
10-02 495
路由的配置
vue二级路由设置方法
08-28
路由数组是一个对象数组，其中每个对象都包含了路由的路径、重定向路径和组件信息。例如： ``` const routes = [ { path: '/', redirect: '/discover' }, { path: '/discover', component: discover }, { ...
uni-simple-router实现简单的路由守卫
04-21
如果传递一个路由对象或者字符串，会重定向到新的路径。 通过`uni-simple-router`，我们可以轻松地实现这些功能，并且其文档清晰易懂，便于开发者快速上手。在`uni-simple-router-my-demo-master`这个项目中，你...
vue-router 路由传参用法实例分析
10-15
在 Vue Router 中，你可以通过 `to` 属性的 `query` 对象来设置查询参数： ```html <router-link :to="{ name: 'list', query: { id: '001' } }">用户001</router-link> ``` 在目标组件中，可以通过 `$route.query...
3-2 路由_路由对象详解
weixin_30949361的博客
04-30 202
1. Router 　　app-routing.moudle.ts中配置 Routes 1 const routes: Routes = [ 2 {path: '', component: HomeComponent}, 3 {path: 'product', component: ProductComponent} 4 ]; 　　注意：　　　　1.path中...
09-指令ng-model-CSS类
不羁放纵爱自由的博客
07-24 605
<!--ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：ng-model 指令根据表单域的状态添加/移除以下类： ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristin
21-service之select下拉菜单
不羁放纵爱自由的博客
07-27 448
<!-- $watch：持续监听数据上的变化，更新界面 --> <!DOCTYPE html> <html lang="en" ng-app="myApp" ng-controller="myCtrl"> <head> <meta charset="utf-8"> <script src="js/angular.js"></script> </head
17-service之$interval
不羁放纵爱自由的博客
07-27 440
<!-- $timeout 可用于设置单次或多次延时服务; $interval 可用于设置始终运行的延时服务。 --> <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="utf-8"> <script src="js/angular.js"></script>
02-指令-ng-init
不羁放纵爱自由的博客
07-24 409
<!--ng-init指令 用于声明模型数据(变量) 可以在整个ng-app内使用 可以初始化数组、对象 、字符串、数值 但是我并不推荐使用这种方式来声明变量--><!DOCTYPE html> <html lang="en" ng-app=""> <head> <meta charset="UTF-8"> <title>Document</title> <script sr
19-service之在过滤器中使用服务
不羁放纵爱自由的博客
07-27 390
<!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="utf-8"> <script src="js/angular.js"></script> </head> <body> <div> 在过滤器中使用服务:
08-指令ng-model应用状态
不羁放纵爱自由的博客
07-24 374
<!--ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="js/angular.js"></script> </head>
03-指令ng-bind
不羁放纵爱自由的博客
07-24 361
<!--ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。 请注意： **ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-bind 指令把应用程序的值绑定到元素。 ------------------------------------------------
16-service之$timeout
不羁放纵爱自由的博客
07-26 358
<!--定时器 --> <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="utf-8"> <script src="js/angular.js"></script> </head> <body ng-controller="myctrl">
react-router-dom v6 路由配置对象写法
05-16
在 React Router v6 中，路由配置对象的写法与 v5 有所不同。以下是一个示例： ``` import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Home from "./components/Home"; import About from "./components/About"; import NotFound from "./components/NotFound"; function App() { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="*" element={<NotFound />} /> </Routes> </Router> ); } export default App; ``` 注意，我们使用了新的 `<Routes>` 组件来包含我们的路由配置，而不是以前的 `<Switch>` 组件。每个路由都是通过 `<Route>` 组件来定义的，其中 `path` 属性指定了路由路径，`element` 属性指定了要呈现的组件。`<Route>` 组件也可以包含子路由，可以通过嵌套 `<Route>` 组件来实现。 另外需要注意的是，v6 中的路由配置对象不再包含 `<Redirect>` 组件，而是通过在 `<Route>` 组件中使用 `navigate` 方法来实现重定向。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jojo999888

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值