本文详细介绍了Vue.js中的路由配置和使用，包括a标签和router-link的跳转方式，参数传递，以及子路由的实现。通过示例代码展示了如何创建和使用Vue Router进行页面间的导航和组件切换，帮助开发者理解Vue应用中的路由管理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--a标签形式-->
<a href="#/login">a登录</a>
<a href="#/regist">a注册</a>
<!--rounter-link方式-->
<!--若在连接中传参数，可以不用修改路由规则-->
<router-link to="/login?id=123&name=maj" tag="span">router-link登录</router-link>
<router-link to="/regist" tag="span">router-link注册</router-link>
<!--第二种传参方式-->
<router-link to="/login/28" tag="span">router-link登录:id</router-link>
<!--子路由实现-->
<router-link to="/account/" tag="span">子路由实现</router-link>
<!--占位符，将匹配到的组件放到里面-->
<router-view></router-view>
</div>
<template id="registelogin">
<div>
<router-link to="/account/login" >登录</router-link>
<router-link to="/account/regist" >注册</router-link>
<!--占位符，将匹配到的组件放到里面-->
<router-view></router-view>
</div>
</template>
<script>
var myTemplate1 ={
template:'<h1>这是模板1----id:{{$route.query.id}}------name:{{$route.query.name}}</h1>',
data(){
return{}//如果在组件中定义了data函数，就一定要写上return，否则会报： 'Cannot read property '__ob__' of undefined'
},
created (){
console.log(this.$route.query);//id值
}
}
var myTemplate2 ={
template:'<h1>这是模板2</h1>'
}
var myTemplate3 ={
//通过：id传值，参数的值是存在params中
template:'<h1>这是模板3----{{this.$route.params.id2}}</h1>',
created (){
console.log(this.$route.params);//id值
}
}
var myTemplate4 ={
template:'#registelogin'
}
var myTemplate5 ={
template:'<h1>--登录</h1>',
}
var myTemplate6 ={
template:'<h1>--注册</h1>',
}
//路由的构造函数
var myrouter = new VueRouter({
//定义路由规则，匹配路径实现跳转
routes:[
{ path:'/',redirect:'/login'},//vue中的redirect重定向和node中的redirec不同，node是服务器短的.直接输入地址：http://127.0.0.1:5500/router/router.html、会自动加上hash的'/login
{ path: '/login', component:myTemplate1}, //路由地址1
{ path: '/regist', component:myTemplate2}, //路由地址2
//第二种传参方式
{ path: '/login/:id2', component:myTemplate3}, //路由地址3
//children实现子路由.※子路由钱的path不能带斜线/
{ path: '/account',
component:myTemplate4,
children:[
{path: 'login', component:myTemplate5},
{path: 'regist', component:myTemplate6}
]
}
]
})
var vm = new Vue({
el:'#app',
data:{
},
methods:{
},
router:myrouter //将路由规则定义到vm中，监视地址变化，切换不同的组件
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
