一、angular
<!doctype html>
<html ng-app="myApp">
<head lang="zh">
<meta charset="utf-8">
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<title>ng</title>
</head>
<body>
<div ng-view></div> //容器
<script>
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>
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
