<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<!-- 引入文件 -->
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
<router-view></router-view>
</div>
<script>
var testLogin = Vue.component("login",{
template:`
<div>
<h1>这是我的登录页面</h1>
</div>
`
})
var testRegister = Vue.component("register",{
template:`
<div>
<h1>这是我的注册页面</h1>
</div>
`
})
//配置路由词典
//对象数组
const myRoutes =[
//当路由地址：地址栏中的那个路径是myLogin访问组件
//组件是作为标签来用的所以不能直接在component后面使用
//要用返回值
//path:''指定地址栏为空：默认为Login页面
{path:'',component:testLogin},
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
const myRouter = new VueRouter({
//myRoutes可以直接用上面的数组替换
routes:myRoutes
})
new Vue({
router:myRouter,
//或者：
/*
router:new VueRouter({
routes:[
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
})
*/
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
一、通过router-link实现跳转
<router-link to="/myRegister">注册</router-link>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<!-- 引入文件 -->
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
<router-view></router-view>
</div>
<script>
var testLogin = Vue.component("login",{
template:`
<div>
<h1>这是我的登录页面</h1>
<router-link to="/myRegister">注册</router-link>
</div>
`
/*to后面是路由地址*/
})
var testRegister = Vue.component("register",{
template:`
<div>
<h1>这是我的注册页面</h1>
</div>
`
})
//配置路由词典
const myRoutes =[
{path:'',component:testLogin},
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
二、通过js的编程的方式
jumpToLogin: function () {
this.$router.push('/myLogin')
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<!-- 引入文件 -->
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!--通过router-view指定盛放组件的容器 -->
<router-view></router-view>
</div>
<script>
var testLogin = Vue.component("login",{
template:`
<div>
<h1>这是我的登录页面</h1>
<router-link to="/myRegister">注册</router-link>
</div>
`
/*to后面是路由地址*/
})
var testRegister = Vue.component("register",{
methods:{
jumpToLogin:function(){
this.$router.push('/myLogin')
}
},
template:`
<div>
<h1>这是我的注册页面</h1>
<button @click="jumpToLogin">注册完成,去登录</button>
</div>
`
})
//配置路由词典
const myRoutes =[
{path:'',component:testLogin},
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
做过web开发的朋友对get和post 的请求的区别肯定十分了解，我就不多讲述了。下面主要介绍一下get和post请求在node中使用的不同
场景就是单纯大登录操作：传递两个参数用户名和密码
get请求：
前台：
function login() {
var name = $('#name').val()
var password = $('#password').val()
if (!name || !password) {
alert('用户名和密码都不能为空')
return
}
$.ajax(
{
type: 'get',
url: '/login',
data: {
name: name,
password: password
},
dataType: 'json',
success: function (data) {
if (data) {
}
},
error: function () {
alert('登录失败!')
return
}
})
}
后台：
var express = require('express')
var router = express.Router()
router.get('/login', function (req, res, next) {
var name = req.query.name
var pass = req.query.password
console.log('name:' + name)
console.log('pass:' + pass)
if (name == 'sis' &&pass == '1') {
res.send('1')
}
res.end('is over')
})
post请求：
前台：
function login() {
var name = $('#name').val()
var password = $('#password').val()
if (!name || !password) {
alert('用户名和密码都不能为空')
return
}
$.ajax(
{
type: 'post',
url: '/login',
data: {
name: name,
password: password
},
dataType: 'json',
success: function (data) {
if (data) {
}
},
error: function () {
alert('登录失败!')
return
}
})
}
后台：
var express = require('express')
var router = express.Router()
router.post('/login', function (req, res, next) {
var name = req.body.name
var pass = req.body.password
console.log('name:' + name)
console.log('pass:' + pass)
if (name == 'sis' &&pass == '1') {
res.send('1')
}
res.end('is over')
})
从文章中可以明显看出get和post请求在node中区别，使用get请求时一定要使用get方法进行监听，并且获取传递过来的参数是要使用query，使用post请求时一定要使用post方法进行监听，同时获取数据是要使用body。至于为什么这样做我暂时不是很清楚，如果我搞清楚了会及时补充上去，欢迎大家补充。
顺带补充，还有一种方法传递参数给server，就是使用路径的方式，可以利用web server的http routing来解析，常见于各种web Framework。这不算是传统标准规范的做法，是属于htto routing的延伸使用
router.get('/login', function(req, res) {
console.log(req.params.name)
console.log(req.params.password)
})
首先在app.vue里面有这么一段然后你所点击的按钮其实是这个东西，这个其实就是个封装完的a标签你在router里面配置完了相关路由之后就能在点击这个按钮的时候将router-view标签里面的组件替换掉了
