vue-router使用的基本步骤

最新推荐文章于 2024-09-26 01:44:27 发布

张小囧！冲呀！

最新推荐文章于 2024-09-26 01:44:27 发布

阅读量397

点赞数 1

分类专栏： vue 文章标签： vue javascript js

本文链接：https://blog.csdn.net/zhangxiaojiong_zh/article/details/106457403

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

引入vue.js以及vue-router.js。先引入vue.js，因为vue-router.js依赖于vue.js。引入vue-router的方式为npm install vue-router -S。引入后便可以使用其抛出的两个组件<router-link to=''></router-link>以及<router-view></router-view>,router-link类似于a标签，其中to属性类似于href属性。若to中还需要指定其它参数的话，需要利用绑定的to,如动态路由参数params :to='{name:"zh",params:{id:1}}',如查询参数query :to='{name:"zh",query:{userId:1}}'。而router-view为路由匹配组件的出口。
Vue使用VueRouter,即Vue.use(VueRouter)。在使用脚手架的时候，因为vue和vue-router不在全局环境下，所以应该执行Vue.use(VueRouter)将其挂载到全局环境之下，而且这样以后还会返回一个VueRouter对象，Vue实例化对象还可以对VueRouter对象进行操作。
创建router对象 ,即let router = new VueRouter({ })
在router对象中制定路由匹配规则，其中涉及redirect属性，即重定向,虽然访问的是path对应的路径，但实际上却重定向到redirect对应的路径

	let router = new VueRouter({
			routes:[
				{name:'login', path:'/login', component:'Login'},
				{name:'regist', path:'/regist', component:'Regist'}
			]
		})

将router交给Vue对象进行管理,即router:router因为key和value是一样的,那么直接router即可。一旦在Vue对象中进行配置后，Vue对象可以通过this.$router对VueRouter进行操作，通过this.$route对路由匹配规则中的内容进行操作。
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>vue-router使用的基本步骤</title>
	</head>
	<body>
		<div id='app'></div>
		<!-- 第一步骤：引入vue.js和vue-router.js -->
		<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>
		<script type='text/javascript' src='node_modules/vue-router/dist/vue-router.js'></script>
		<script type='text/javascript'>
		// 第二步骤: Vue.use(VueRouter)  当VueRouter不在全局环境下时再使用（此步骤可忽略）
			let Login = {
				template:`
					<div>我是登陆</div>
				`
			}

			let Regist = {
				template:`
					<div>我是注册</div>
				`
			}

		//第三步骤：新建router对象      
		//第四步骤：定义路由匹配规则routes ,routes是一个对象数组，对象中包含的是一个个的路由匹配规则{name, path, component} 
		// routes路由配置规则下的component为路由对应的具体组件，而且对应的不是字符串而是一个实实在在的已定义组件名
			let router = new VueRouter({
				routes:[
					{
						name:'login',
						path:'/login',
						component:Login     
					},
					{
						name:'regist',
						path:'/regist',
						component:Regist
					}
				]
			})

			// App组件下之所以可以使用router-link和router-view是因为script引入了vue-router，因此其它子组件中也是可以使用的
		/*	let App = {
				template:`
					<div class='app'>
						<router-link :to='{name:"login"}'>登陆</router-link>
						<router-link :to='{name:"regist"}'>注册</router-link>
						<router-view></router-view>
					</div>
				`
			}*/

			// to中不包含参数，直接用字符串形式，则to无需使用:to这种绑定形式
			let App = {
				template:`
					<div class='app'>
						<router-link to='/login'>登陆</router-link>
						<router-link to='/regist'>注册</router-link>
						<router-view></router-view>
					</div>
				`
			}

			// 第五步骤：router对象交给Vue对象进行管理
			let vm = new Vue({
				el:'#app',
				router,
				components:{
					App
				},
				template:`
					<App/>
				`				
			})
		</script>
	</body>
</html>