vue系列_vue-Router入门和理解

小鱼儿 2021-11-16 11:50 289阅读 0赞

## **一、路由的概念和名称** ##

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>

## 四、效果 ##

![20190728064634421.png][]

## 五、另外说一点 ##

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70][]

[20190728064634421.png]: /images/20211116/96e0543eca18449baa70a8196ddbb496.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70]: /images/20211116/aef07999a96e428fa21a49345e0411a6.png