Vue 创建一个Vue项目 以及参数的传递与重定向

首先，init一个项目

D:\javawebPractce\Vue 这是我的工程路径

创建命令

vue init webpack hello-vue

hello-vue是我的项目名称

创建之后，我为了方便，将router自动安装了

安装element UI

npm i element-ui -S

安装组件

npm stall

安装sass加载器

cnpm install sass-loader node-sass --save-dev

启动测试

npm命令解释

 

 

首先看参数的传递

我们在router中配置好了组件的路径，名字，以及绑定的组件

用代码来说明

      path:'/main/:id',
      name:'Main',
      component:Main

我们可以看到这三个属性

与之前不同的是，我们在path属性中加入了:id也就代表着我们可以传递变量名为id的变量

怎么传递呢

<router-link :to="{name:'Main',params:{id:1}}">跳转</router-link>

 我们可以看到，我们将一个对象绑定到了to，然后用params传递了id=1

那么我们如何接收呢

{{$route.params.id}}

只需要在我们跳转到的页面加上这个代码就OK了

到这里，我有点疑惑，因为我之前写的登录页面，他是用router.push到了我所需要的页面

而这个接收，却用了route，这就让我好奇，他们两个的区别在哪呢，什么时候用哪个呢

下面是我在网上搜到的一些解释

1. Router（路由器）是 Vue.js 的一个插件，用于实现客户端路由。它在应用程序中注册并控制包含在 URL 中的视图组件的映射关系。简而言之，Router 是整个 Vue.js 应用程序的路由控制中心。

2. Route（路由）指的是应用程序中的单个路由。每个路由由一个 URL、视图和用于渲染视图的数据组成。Route 与路径匹配，并将映射到相应的组件。

简而言之，Router 控制应用程序中所有路由的映射关系和导航，而 Route 是单个路由和其组件之间的联系和匹配。

 

 

当然还有另一种接收参数的方式，也就是用props进行解耦

在用之前，我们需要先配置一下路由

      path:'/main/:id',
      name:'Main',
      component:Main,
      props:true

我们可以看到，我们仅仅加了一个props而已，代表支持这种方式传参

在我们需要跳转的页面里

export default {
  props:[‘id’],
  name: "Main"
}

然后怎么取出来呢

{{id}}

如此之简单，还是这么写比较舒服

 

关于重定向就更为简单了，我们只需要在路由配置中写好，直接调用就好了

以重定向到main为例

      path: '/gohome',
      redirect:'/main'

这样直接调就好了