vue系列_vue-Router入门和理解

最新推荐文章于 2023-02-17 22:04:11 发布

田江

最新推荐文章于 2023-02-17 22:04:11 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue-Router 路由 vue

本文链接：https://blog.csdn.net/jiang7701037/article/details/97600940

版权

vue 专栏收录该内容

49 篇文章 25 订阅

订阅专栏

一、路由的概念和名称

1、路由：就是根据不同的请求路径，跳转到不同的组件而已。

2、路由配置：设置哪些路径对应哪些组件，就是路由的核心。

3、谨记：Vue-Router也是个对象，在创建Vue-Router时，构造函数里需要传入路由配置，否则，路由对象Vue-Router如何进行路由

4、Vue-Router对象必须要放到Vue对象里，否则，Vue-Router没法用。即：在创建Vue对象时，需要把Vue-Router对象，作为Vue对象构造函数的配置传入。

二、使用路由的步骤：

1、路由配置：

路由配置是个json数组。

import addGoods from './addGoods';//引入组件：addGoods
import goodslist from './goodslist';//引入组件：goodslist

//路由配置：是个json数组，不同的路径对应不同的组件
const routeObjs = [
  {
     path: '/addGoods',    //请求的路径：根目录下的addGoods
     component:  addGoods    //组件名
   },
  {
     path: '/goodslist',    //请求的路径：根目录下的goodslist
     component:  goodslist    //组件名
   }
]

2、创建Vue-Router对象：

new对象时，把上面的配置要传入，否则，一个空空的Vue-Router对象，啥也干不了。即：Vue-Router对象就是根据路由配置来工作的。

const router = new VueRouter({
  routes:routeObjs //routeObjs就是上面的路由配置
})

3、把Vue-Router传入Vue对象

let vum = new Vue({
  el:"#app",
  router:router,//把路由对象传入到Vue对象里
  data:{
         ………………
  },
  methods:{
      …………………………
  }
})

4、路由跳转：

路由跳转：就相当于超链接一样。

1）、点击什么文字，跳转到哪个路径(相当于<a href=""></a>标签)

<router-link to='/addGoods'>添加商品</router-link> //相当于<a href="/addGoods">添加商品</a>
<router-link to='/gooslist'>商品列表</router-link>

2）、跳转的组件在哪儿显示

<router-view/>：表示组件显示的位置。

超链接（a标签）跳转后，页面时显示在整个浏览器窗口的，但是，组件只是显示在<router-view/>标签所在的位置。即网页的某个地方。你知道iframe的话，就大概能够想通。

代码：

    <router-link to='/addGoods'>添加商品</router-link>
    <router-link to='/goodslist'>商品列表</router-link>
    <hr/>
    <router-view/>

三、完整代码：

轻量化一点（不用脚手架）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		html,body{
			height: 100%;
		}

		

	</style>
</head>
<body>
	<div id="app">
	    <router-link to='/addGoods'>添加商品</router-link>
    	<router-link to='/goodslist'>商品列表</router-link>
    	<hr/>
    	<router-view/>
	</div>
</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

// import addGoods from './addGoods';//引入组件：addGoods
// 定义组件（不引入了，直接定义）
let addGoods={
	data:function(){
		return {}
	},
	template:"<h1>添加商品</h1>",	
	created:function(){
		console.log(this.$router);//在任何组件里都能看的router对象。因为，把router对象放在vue对象里
		console.log(this.$router.options);//这是路由配置
        console.log(this.$route);//当前路由，就是路径
	}
}
// import goodslist from './goodslist';//引入组件：goodslist
//定义组件（不引入了，直接定义）
let goodslist={
	data:function(){
		return {}
	},
	template:"<h1>商品列表</h1>",	
	created:function(){
		console.log(this.$router);//在任何组件里都能看的router对象。因为，把router对象放在vue对象里
		console.log(this.$router.options);//这是路由配置
        console.log(this.$route);//当前路由，就是路径
	}
}

//路由配置：是个json数组，不同的路径对应不同的组件
const routeObjs = [
  {
     path: '/addGoods',    //请求的路径：根目录下的addGoods
     component:  addGoods    //组件名
   },
  {
     path: '/goodslist',    //请求的路径：根目录下的goodslist
     component:  goodslist    //组件名
   }
]

const router = new VueRouter({
  routes:routeObjs //routeObjs就是上面的路由配置
})

let vum = new Vue({
  el:"#app",
  router:router,//把路由对象传入到Vue对象里
  data:{
         // ………………
  },
  methods:{
      // …………………………
  }
})



</script>

四、效果

五、另外说一点

由于，我们把vue-Router对象放入了vue对象里，所以，在任何组件里都可以通过以下代码看到，当前vue-Router对象以及路由配置：

console.log(this.$router);//在任何组件里都能看的router对象。因为，把router对象放在vue对象里
console.log(this.$router.options);//这是路由配置
console.log(this.$route);//当前路由，就是路径

田江

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue系列_vue-Router入门和理解

一、路由的概念和名称1、路由：就是根据不同的请求路径，跳转到不同的组件而已。2、路由配置：设置哪些路径对应哪些组件，就是路由的核心。3、谨记：Vue-Router也是个对象，在创建Vue-Router时，构造函数里需要传入路由配置，否则，路由对象Vue-Router如何进行路由4、Vue-Router对象必须要放到Vue对象里，否则，Vue-Router没法用。即：在创建Vue对象...
复制链接

扫一扫