Vue中使用Vue-Router管理路由

Love The Way You Lie 2023-06-27 11:10 65阅读 0赞

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。  
使用 Vue通过组合`组件`来构成应用程序，把 vue-router 添加进来，是将组件映射到路由，告诉vue-router在哪里渲染它们。

# 一、安装Vue-Router #

为了快速入门，依然和之前的Vue.js、Vuex.js一样，使用script标签引入Vue-Router

引入之后，windows对象会增加一个新属性VueRouter，其值是一个构造函数：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200113090225324.gif]

上面的例子中只有一个页面index.html，可以看到地址栏在不断变化，页面随之局部更新，但不会发出HTTP请求。

# 二、创建 router 实例 #

可以用`new VueRouter(options)`创建一个router实例，来管理Vue项目中的路由，参数是路由的`配置参数`。

配置参数中最重要的是routes,它是一个数组，用来设置一组url与组件的对应关系，数组中的成员称为一条路由。

const router = new VueRouter({ 
       routes: [
         {  path: '/home', component: {  template: '<div>Home组件</div>' }},
         {  path: '/products', component: {  template: '<div>Products组件</div>' }}
       ],
       mode:'hash'
     });
     console.log(router);

### router、routes、 route、currentRoute的区别 ###

通过下图，理解一下Vue-Router路由管理中的基本概念

*  router：对象，是一个路由实例，通过它来管理路由。
 *  routes：数组，是创建vue-router路由实例的配置项。用来配置多个route路由对象 [vue-router路由配置][vue-router]
 *  route：对象，routes的成员，一条路由记录。
 *  currentRoute：当前路由对象 [vue-router中当前路由对象属性][vue-router 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]

# 三、在vue实例中引入Router实例 #

在Vue中使用Vue-Router，必须将Router实例注入到vue实例中，方法很简单，配置实例的router配置项即可

new Vue({ 
     el: "#app",
     router
    });

注入成功后，Vue根实例中会增加两个属性$router和$route，在Vue实例（包含子组件）中都可以通过this.$router 访问路由管理器，this.$route 访问当前路由对象。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 2]

# 四、渲染路由匹配的组件 #

在模板中使用<router-view> 组件用来渲染通过路由映射过来的组件

到这里，在地址栏里手动输入`http://localhost:8088/#/home`和`http://localhost:8088/#/products`，就可以匹配到不同的组件了。

# 五、实现导航 #

多页应用中一般通过A标签或者JS代码的location对象实现导航。  
Vue与Vue Router结合，使用两种方法实现导航，一种是类似A标签的方法在视图中使用<router-link>组件实现导航，一种是用router对象的方法实现编程式导航。

### 1、在视图中实现声明式导航 ###

*  在模板中<router-link>组件用来定义导航链接。在其to属性中指定目标地址，默认<router-link>组件渲染为带有正确连接的<a>标签

<router-link>组件的`to`属性标路由的目标，值可以是一个字符串，也可以是描述目标位置的对象。  
触发（默认click触发）导航会立刻把to的值传送给`router.push()`方法。

<router-link to="/home">首页</router-link>
    <router-link :to="{path:'/home'}">首页</router-link>

[router-link组件的属性][router-link]

### 2、编程式导航 ###

除了用 <router-link>实现导航，还可以借助 router 的实例方法，通过编写script代码来实现导航，即编程式导航。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 3]  
通过Vue Router的实例方法router.push()，router.replace()，router.go()，router.back()，router. forward()可以实现编程式导航。

*  `router.push(location)`  
    动态的导航到一个新 URL，`router.push()`方法会向 history 栈添加一个新的记录，该方法的参数可以是一个字符串路径，或者一个`描述地址的对象`。描述地址的对象可以包含的属性有：path,name,params,query等等。
    
        router.push('/home') // 字符串
        router.push({  path: '/product' })  // 对象
        router.push({  path: '/product',params:{ id:1} }) //这条设置无效，因为如果提供了路由的path,params将会被忽略
        router.push({  name: 'product', params: {  userId: '123' }})  // 传递params，需要提供路由的name
        router.push({  path: '/product', query: {  type: 1 }})  // 带查询参数query，url将变成 /product?type=1

router.push(location)相当于声明式导航<router-link :to=“location”>

*  `router.replace(location)`  
    替换当前的url，和`router.push()`方法功能上和router.push()相似，但不会向 history 栈添加新记录，而是替换 history 栈中当前记录。  
    相当于声明式导航<router-link :to=“location” replace>
 *  router.go(n) 指定在 history 记录中前进/回退的步数，n 为正数的时候是前进；负数的时候是后退；类似 window.history.go(n)
 *  router. forward() 在 history 记录中前进一步。
 *  router.back() 在 history 记录中回退一步。

##### 跳转传参 #####

1.  params传参  
    params传参需要在配置路由的时候给路由一个name属性

<router-link :to="{name:'products',params:{id:1,content:'产品1'}}" >跳转到产品1</router-link>

this.$router.push({ name: "products", params: { id: 1, content: "产品1"}})

![在这里插入图片描述][20200727203946646.png]

1.  通过query传参

<router-link :to="{path:'/detail',query:{id:1,content:'产品1'}}" >跳转到产品1</router-link>

this.$router.push({ path: "/detail", query: { id: 1, content: "产品1"}})

![在这里插入图片描述][20200727204132407.png]

1.  url传参  
    这种方法需要在路由配置时在path中携带动态路径参数，以：开头

routes: [
      {  name:'detail',path: '/detail/:id/:name', component:Detail},  //path中携带`动态路径参数`
    ]

<router-link :to="{name:'detail',params:{id:1,content:'产品1'}}" >跳转到产品1</router-link>

this.$router.push({ name: "detail", params: { id: 1, content: "产品1"}})

![在这里插入图片描述][20200727204822838.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200108140337281.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[20200113090225324.gif]: https://img-blog.csdnimg.cn/20200113090225324.gif
[vue-router]: https://blog.csdn.net/dreamingbaobei3/article/details/89000872
[vue-router 1]: https://blog.csdn.net/dreamingbaobei3/article/details/108246356
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200111143533916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200111144432598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[router-link]: https://blog.csdn.net/dreamingbaobei3/article/details/103936888
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200108110033740.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[20200727203946646.png]: https://img-blog.csdnimg.cn/20200727203946646.png
[20200727204132407.png]: https://img-blog.csdnimg.cn/20200727204132407.png
[20200727204822838.png]: https://img-blog.csdnimg.cn/20200727204822838.png