SPA单页路由词典

来源：互联网发布：myeclipse编译java文件编辑：程序博客网时间：2024/06/05 05:29

一、angular

<!doctype html>

</head>

<body>

<div ng-view></div> //容器

var app=angular.module('myApp',['ng','ngRoute']);

app.config(function($routeProvider){
$routeProvider.when('/login',{templateUrl:'tpl/login.html'})

.when('/register',{templateUrl:'tpl/register.html'})

.otherwise({redirectTo:'/login'})

});

</script>

</body>

</html>

二、ionic

<!doctype html>
<html ng-app="myApp">
<head lang="en">
<script src="ionic.bundle.js"></script>
<meta charset="UTF-8">
<title>ionic</title>
</head>
<body>
<ui-view></ui-view> //容器
<script>
var app = angular.module('myApp',
['ionic']);
//配置状态
app.config(
function ($stateProvider,
$urlRouterProvider) {
//添加状态
$stateProvider
.state('start', {
url: '/myStart',
templateUrl: 'tpl/start.html'
})
.state('login', {
url: '/myLogin',
templateUrl: 'tpl/login.html',
controller: 'loginCtrl'
})
.state('main', {
url: '/myMain/:myName', //有参数
templateUrl: 'tpl/main.html',
controller: 'mainCtrl'
})
//默认链接
$urlRouterProvider
.otherwise('/myLogin');
})

</script>

</body>

</html>

三、vue

<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<title></title>
</head>
<body>
<div id="example">
<router-view></router-view> //容器
</div>
<script id="myLogin" type="text/x-template">
<div>
<h1>这是登录页面</h1>
<button @click="jump">
没有账号去注册
</button>
<a href="#/kflRegister">
去注册
</a>

<router-link
to="/kflRegister">
再去注册
</router-link>
</div>
</script>
<script id="myRegister" type="text/x-template">
<div>
<h1>这是注册页面</h1>
</div>
</script>
<script>
var MyLogin = Vue.component('login',{
template:'#myLogin',
methods:{
jump: function () {
//借助于路由模块实现组件间的跳转
this.$router
.push('/kflRegister');
}
}
})
var MyRegister = Vue.component('register',{
template:'#myRegister'
})
//配置路由词典
const myRoutes = [
{
path:'/kflLogin',
component:MyLogin
},
{
path:'/kflRegister',
component:MyRegister
},
{
path:'',
component:MyLogin
}
];
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el: '#example',
data: {
msg: 'hello'
}
})
</script>
</body>
</html>

阅读全文

0 0