Vue简单创建一个项目（九）

url链接里面最好用的就是传值了，多会用在页面跳转查看详情什么的，也不涉及到安全的情况，所以动态路由传值就必须要讲一下：
比如news页会有很多主题，他们类似于：

<a href="details.html?id=1">新闻一</a>
<a href="details.html?id=2">新闻二</a>
<a href="details.html?id=3">新闻三</a>
<a href="details.html?id=4">新闻四</a>

点击每一个链接他都会天转到新的页面，然而根据不同的传值，会调取不同的内容展示。
一样的，只不过，我们这里的details.html,会是一个Details.vue组件。

第一种传值方法：隐？号传值法

main.js引入组件：

import Details from './components/Details';

路由设置

const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/details/:aid', component: Details },//动态路由传值※※※※※※※※※
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

模仿a标签跳转并且传相应的值

<div id="News">
      <h2>我是新闻</h2>
      <ul><li v-for="(item,key) in list"> <router-link :to="'/details/'+key">{{key}}----------{{item}}</router-link></li></ul>
      <button @click="newstohome">给home传输局</button>
 </div>

然后点击这个链接就跳转到相应的详情页面了，根据传的值就可以处理页面了。

第二种传值方法：显？号传值法，又叫做get传值法

main.js引入组件：

import Details from './components/Details';

const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/details', component: Details },//get传值※※※※※※※※※
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

模仿a标签跳转并且传相应的值

<div id="News">
      <h2>我是新闻</h2>
      <ul><li v-for="(item,key) in list"> <router-link :to="'/details?id='+key">{{key}}----------{{item}}</router-link></li></ul>
      <button @click="newstohome">给home传输局</button>
 </div>