vue3学习（路由传递参数）

路由传递参数

页面跳转过程中，是可以携带参数的，这也是很常见的业务。

一.创建vue3项目

首先需要创建一个vue项目，

1.先在vs code终端输入vue create 项目名

2.选择Manually select features(手动选择选项)，按enter确定

3.选择Babel(javascript的编译器，可以使代码向下兼容)，progressive web app pwa support（提升网站的体验）和Router(配置路由)。按enter确定

4选择3.x(此项为选择vue的版本，我选择的为vue3). 按enter确定

5.输入n(此项为是否使用历史的路由模式) 按enter确定

6.选择 In dedicated config files(使用专用的配置文件夹放置配置文件)，按enter确定

7.输入n(此项为是否将上述配置设为预设配置)。按enter确定

那么一个vue3项目就创建好了。在控制台输入cd 项目名和npm run serve即可运行项目。

二.创建新闻页面配置进首页

1.在src->views文件夹下创建NewsView.vue文件。在该文件里设计新闻页面样式。

2.在src->router->index.js文件中加入新页面的路由配置。

{
    path:'/news',
    name:'news',
    //这是异步加载方式
    component:() =>import('../views/NewsView.vue')
  }

异步加载方式：如果这个页面没有显示，那么这个代码不会被执行。不执行就节省内存空间。

（如果都使用import方式引入的话，页面太多容易造成卡顿。所以除了首页使用import方式引入，其他页面都采用异步加载方式。能够确保首页页面加载速度够快）

3.在App.vue的样式中加入新闻跳转。

  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>|
    <router-link to="/news">news</router-link>
  </nav>

三.在创建的新闻页面实现路由传递参数

1.在src->views下新建一个页面，实现新闻页面到具体新闻详情的跳转，命名为NewsdetailsView.vue。在该页面设置新闻详情样式。

2.利用和创建新闻页面相同的操作引入新闻详情页的路由配置（如二.2）

3.将所有新闻都跳转至相同详情的页面。

<template>
    <ul>
        <li><RouterLink to="newsdetails">百度新闻</RouterLink></li>
        <li><RouterLink to="newsdetails">网易新闻</RouterLink></li>
        <li><RouterLink to="newsdetails">头条新闻</RouterLink></li>
    </ul>
</template>

4.在路由配置中指定参数的key

 {
    path:'/newsdetails/:name',
    name:'newsdetails',
    component:() =>import('../views/NewsdetailsView.vue')
  }

5.在跳转过程中携带参数。（在NewsView.vue里修改）

<template>
    <ul>
        <li><RouterLink to="newsdetails/百度">百度新闻</RouterLink></li>
        <li><RouterLink to="newsdetails/网易">网易新闻</RouterLink></li>
        <li><RouterLink to="newsdetails/头条">头条新闻</RouterLink></li>
    </ul>
</template>

6.在详情页面读取携带的参数。(在NewsdetailsView.vue里添加)

<template>
    <div>
    <h3>详情</h3>
    <p>{{$route.params.name}}</p>
    </div>   
</template>

如有错误或疑问，欢迎讨论与批评指正！