VUE基础开发-------3---路由

最新推荐文章于 2024-03-31 09:49:46 发布

nzch

最新推荐文章于 2024-03-31 09:49:46 发布

阅读量155

点赞数

分类专栏： VUE XXD

本文链接：https://blog.csdn.net/qq_28764557/article/details/102663517

版权

XXD 同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

VUE

6 篇文章 0 订阅

订阅专栏

代码：用hashchange监听hash的改变。

核心就是监听锚点值的改变。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<a href="#/login">登录</a>
	|
	<a href="#/register">注册</a>
	<div id="app"></div>

	<script type="text/javascript">
		var appdiv=document.getElementById('app')

		window.addEventListener('hashchange', function(e) {
			  console.log(location.hash)
			  switch(location.hash){
			  	case '#/login':
			  	appdiv.innerHTML='我是登录页面';
			  	break;
			  	case '#/register':
			  	appdiv.innerHTML='我是注册页面';
			  	break;
			  }
			})
	</script>
</body>
</html>

----------------------3-1----------------这个讲的就是原理----------------------

1.下载路由插件

2.拿来直接用。

3.引入路由插件拿到的是js文件直接引用就可以了。

<!-- 引入路由插件 -->
	<script type="text/javascript" src="vue-router.js"></script>

4.安装路由插件，在new Vue外面安装。

//安装路由插件
Vue.use(VueRouter);

为什么？看下源码

5.创建路由对象，配置路由规则：

//创建路由对象
		var router= new VueRouter({
			//配置路由对象
			routes:[
				{path:'/login',name:'login',component:Login}//三个参数 路径 名字  组件
			]
		})

6.将配置好的路由对象交给VUE注册

ew Vue({
			el:'#app',
			router,
			template:`。。。。。。

7.留坑：<router-view></router-view>

代码：

<!DOCTYPE html>
<html>
<head>
	<title>路由的安装和使用</title>
</head>
<body>
	<div id="app">
		
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<!-- 引入路由插件 -->
	<script type="text/javascript" src="vue-router.js"></script>
	<script type="text/javascript">
		var Login={
			template:`
				<div>我是登录页面</div>
			`,
		}
		//安装路由插件，之前必须要安装的
		Vue.use(VueRouter);
		//创建路由对象
		var router= new VueRouter({
			//配置路由对象
			routes:[
				{path:'/login',name:'login',component:Login}
			]
		})
		new Vue({
			el:'#app',
			router,
			template:`
				<div>
					<p>请在链接上加上login测试路由功能</p>
                    <router-view></router-view>
				</div>
			`,
			data(){
				return {}
			},
		})
	</script>
</body>
</html>

---------3-2--------

注意组件是什么？

1.通过标签去跳转

<router-link to='/login'>去登录</router-link>
					|
<router-link to='/register'>去注册</router-link>

2.js跳转，示例，略。

代码：

<!DOCTYPE html>
<html>
<head>
	<title>路由的跳转</title>
</head>
<body>
	<div id="app">
		
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<!-- 引入路由插件 -->
	<script type="text/javascript" src="vue-router.js"></script>
	<script type="text/javascript">

		var Login={
			template:`
				<div>我是登录页面</div>
			`,
		}
		var Register={
			template:`
				<div>我是注册页面</div>
			`,
		}
		var Buy={
			template:`
				<div>我要买东西</div>
			`,
		}
		//安装路由插件
		Vue.use(VueRouter);
		//创建路由对象
		var router= new VueRouter({
			//配置路由对象
			routes:[
				{path:'/login',name:'login',component:Login},
				{path:'/register',name:'register',component:Register},
				{path:'/buy',name:'buy',component:Buy},
			]
		})
		new Vue({
			el:'#app',
			router,//这个键值对都是一样的直接写一个就可以了。
			template:`
				<div>
					<router-link to='/login'>去登录</router-link>
					|
					<router-link to='/register'>去注册</router-link>
					<div>
						<button @click='goregister'>我要去买东西</button>
						<button @click='back'>返回上一页</button>
					</div>
					<router-view></router-view>//这个是给跳转留的坑
				</div>
			`,
			data(){
				return {}
			},
			methods:{
				goregister(){
					//push跟replace是达到同样效果，但是replace是不会向history插入记录
					// this.$router.push({path:'/register'})
					this.$router.replace({path:'/buy'})
					
				},
				back(){
					this.$router.go(-1)
				}
			}
		})
	</script>
</body>
</html>

---------3-3-------

路由的传参和取参，传参数和取参数：

传参数：

<router-link :to="{name:'login',query:{id:'123'}}">去登录</router-link>
					|
<router-link :to="{name:'restiger',params:{foo:'bar'}}">去注册</router-link>

不是查询参的话要额外定义的：

var router= new VueRouter({
			//配置路由对象
			routes:[
				{path:'/login',name:'login',component:Login},
				{path:'/restiger/:foo',name:'restiger',props:true, component:Restiger},
			]
		})

总结：

取参数：注意register有两种方法。

代码：

<!DOCTYPE html>
<html>
<head>
	<title>路由的跳转</title>
</head>
<body>
	<div id="app">
		
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<!-- 引入路由插件 -->
	<script type="text/javascript" src="vue-router.js"></script>
	<script type="text/javascript">
		var Login={
			template:`
				<div>我是登录页面 
					<span>这是我获取到的参数： {{ msg }}</span>
				</div>
			`,
			data(){
				return { 
					msg:''
				}
			},
			created(){
				this.msg=this.$route.query.id
			}
		}
		var Restiger={
			template:`
				<div>我是注册页面
					<span>这是我获取到的路由参数：{{ foo }}</span>
				</div>
			`,
			props:['foo']
			// data(){
			// 	return {
			// 		restigerfoo:''
			// 	}
			// },
			// created(){
			// 	this.restigerfoo=this.$route.params.foo
			// }
		}
		//安装路由插件
		Vue.use(VueRouter);
		//创建路由对象
		var router= new VueRouter({
			//配置路由对象
			routes:[
				{path:'/login',name:'login',component:Login},
				{path:'/restiger/:foo',name:'restiger',props:true, component:Restiger},
			]
		})
		new Vue({
			el:'#app',
			router,
			template:`
				<div>
					<router-link :to="{name:'login',query:{id:'123'}}">去登录</router-link>
					|
					<router-link :to="{name:'restiger',params:{foo:'bar'}}">去注册</router-link>
					<button @click='jslink'>js跳转去登录</button>
					<router-view :key="$route.fullPath"></router-view>
				</div>
			`,
			data(){
				return {}
			},
			methods:{
				//js跳转传参是一样的
				jslink(){
					this.$router.push({name:'login',query:{id:'456'}})
				}
			}
		})
	</script>
</body>
</html>

----------3-4------

嵌套路由：

js跳转：

界面没有刷新这个是为什么呢？

是因为路由没有改变但是参数变了。

<!DOCTYPE html>
<html>
<head>
	<title>路由的跳转</title>
</head>
<body>
	<div id="app">
		
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<!-- 引入路由插件 -->
	<script type="text/javascript" src="vue-router.js"></script>
	<script type="text/javascript">
		var Nav={
			template:`
				<div>
					<router-view></router-view>
					<router-link :to="{name:'nav.index'}">首页</router-link>
					|
					<router-link :to="{name:'nav.pensonal'}">个人中心</router-link>
					|
					<router-link :to="{name:'nav.message'}">资讯</router-link>
					|
					<router-link :to="{name:'nav.mine'}">我的</router-link>
				</div>
			`,
		}
		var Index={
			template:`
				<div>首页</div>
			`,
		}
		var Pensonal={
			template:`
				<div>个人中心</div>
			`,
		}
		var Message={
			template:`
				<div>资讯</div>
			`,
		}
		var Mine={
			template:`
				<div>我的</div>
			`,
		}
		//安装路由插件
		Vue.use(VueRouter);
		//创建路由对象
		var router= new VueRouter({
			//配置路由对象
			routes:[
				{
					path:'',
					redirect:'/nav'
				},
				{
					path:'/nav',
					name:'nav',
					component:Nav,
					//嵌套路由增加这个属性
					children:[
						//配置我们的嵌套路由
						{path:'',redirect:'/nav/index'},
						{path:'index',name:'nav.index',component:Index},
						{path:'pensonal',name:'nav.pensonal',component:Pensonal},
						{path:'message',name:'nav.message',component:Message},
						{path:'mine',name:'nav.mine',component:Mine},
					]
				}
			]
		})
		new Vue({
			el:'#app',
			router,
			template:`
				<div>
					<router-view></router-view>
				</div>
			`,
			data(){
				return {}
			},
			methods:{
			}
		})
	</script>
</body>
</html>

解释：

---------3-5--------

路由守卫：

不看了很少用的。

<!DOCTYPE html>
<html>
<head>
	<title>路由守卫</title>
</head>
<body>
	<div id="app">
		
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<!-- 引入路由插件 -->
	<script type="text/javascript" src="vue-router.js"></script>
	<script type="text/javascript">
		var Nav={
			template:`
				<div>
					<router-view></router-view>
					<router-link :to="{name:'nav.index'}">首页</router-link>
					|
					<router-link :to="{name:'nav.pensonal'}">个人中心</router-link>
					|
					<router-link :to="{name:'nav.message'}">资讯</router-link>
					|
					<router-link :to="{name:'nav.mine'}">我的</router-link>
				</div>
			`,
		}
		var Index={
			template:`
				<div>首页</div>
			`,
		}
		var Pensonal={
			template:`
				<div>个人中心</div>
			`,
		}
		var Message={
			template:`
				<div>资讯</div>
			`,
		}
		var Mine={
			template:`
				<div>我的</div>
			`,
		}
		//安装路由插件
		Vue.use(VueRouter);
		//创建路由对象
		var router= new VueRouter({
			//配置路由对象
			routes:[
				{
					path:'',
					redirect:'/nav'
				},
				{
					path:'/nav',
					name:'nav',
					component:Nav,
					//嵌套路由增加这个属性
					children:[
						//配置我们的嵌套路由
						{path:'',redirect:'/nav/index'},
						{path:'index',name:'nav.index',component:Index},
						{path:'pensonal',name:'nav.pensonal',component:Pensonal},
						{path:'message',name:'nav.message',component:Message},
						{path:'mine',name:'nav.mine',component:Mine},
					]
				}
			]
		})
		new Vue({
			el:'#app',
			router,
			template:`
				<div>
					<router-view></router-view>
				</div>
			`,
			data(){
				return {
					loginstate:true
				}
			},
			methods:{
			},
			mounted(){
				//利用路由守卫做当跳转首页时可直接跳转，跳转其他页面要等待两秒才可以跳转
				router.beforeEach((to,from,next)=>{
					console.log(to)
					if(to.path=='/nav/index'){
						next()
					}else{
						setTimeout(function(){
								next()
						},2000)
					}
				})
			}
			
		})
	</script>
</body>
</html>

------3-6----------

nzch

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE基础开发-------3---路由

代码：用hashchange监听hash的改变。核心就是监听锚点值的改变。<!DOCTYPE html><html><head> <title></title></head><body> <a href="#/login">登录</a> | <a href...
复制链接

扫一扫

专栏目录