vue-router 路由与 angular-route
一些相同的地方和不一样的地方,更好的理解两个路由!
在angular-route:
*$rootScope 注册的根作用域,所有的控制器都可以用。
问题1:angualr-routel 里点击对应的路由路径会执行两次,为什么?
app.controller("postNewsController",function ($scope,$rootScope) { $rootScope.message="elin"; console.log($rootScope.message); })
app.controller("readNewsController",function ($scope,$rootScope) {
console.log($rootScope.message);//执行两次
})
app.config(function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix("");
$routeProvider.when("/home",
{
template:"<p>home</p>",
controller:"postNewsController"
});
$routeProvider.when("/find",
{
template:"<p>find</p>",//在页面点击它时,会执行两次 readNewsController控制器里的事件
controller:"readNewsController"
})
$routeProvider.otherwise("/find");
});
vue-router
var router=new VueRouter( { routes:[ {path:"/home",component:{template:"<p class='home'>home</p>"}}, {path:"/find",component:{template:"<p>find</p>"}} ] } ) var config={ el:"#app", data:{}, router:router } new Vue(config);
angular-route: 特别注意有没有r angular 的 ng-Route 与 vue的 router 但是 angular的第三方路由 ui-router
var app=angular.module("app",["ngRoute"]); app.controller("home",function ($scope) { $scope.name="sekin"; }) app.controller("find",function ($scope) { $scope.name="12"; }) app.config(function ($routeProvider,$locationProvider) { $locationProvider.hashPrefix("");//用来解决angular1.46 -> 1.63 版本跳转路径的时候,hash出现错误,$locationProcider 通过hashPrefix 去掉多余的部分
$routeProvider.when("/home",{ template:"<p ng-bind='name'></p>", controller:"home" }) $routeProvider.when("/find",{ template:"<p ng-bind='name'></p>", controller:"find" }) }
)
angular 里 app.js 文件 : angular.module("app",["app.route"]);
到另外一个文件里引用 route.js : var app= angular.module("app.route",["ngRoute"])