16、vue.js 之路由传值

用node加webpack开发

1、通过网址传值（在路由里获值）

项目文件下src下的main.js文件里面的代码如下，其他地方不动

// 这里是主文件import Vue from 'vue' // 引入vueimport Router from 'vue-router' // 引入路由插件 路径 没有 ./ /  直接写名字是找的node_modules目录下的文件const App = {// 默认模板  template: `<div id="app">    默认显示的内容    <ul>      <li><router-link to="/">index</router-link></li>      <li><router-link to="/about">about</router-link></li>    </ul>    <router-view></router-view>  </div>`}const index = {// 首页模板  template: `<div>这里是index</div>`}const about = {// about页模板  template: `<div>这里是about  <ul>      <li><router-link to="/about/aa">aa</router-link></li>      <li><router-link to="/about/aaa">{{ $route.params }}</router-link></li>    </ul>  <router-view></router-view>  </div>`}const aa = {// aa页模板  template: `<div>这里是aa</div>`}const aaa = {// aaa页模板  template: `<div>这里是aaa{{id}}</div>`}// 必须放在后面 因为前面声明模板用的是const ES6的语法，必须先声明后调用const router = new Router({// 跟路由显示的地方是第一个 router-view 标签里  routes: [// 在routes里面的称之为跟路由    {path: '/', component: index},    {path: '/about',      component: about,      children: [      // 子路由不可以写 /      // 父级路由已经定义了 /a/子路有的path      // 子路由显示的地方 父级路由模板里的第一个 router-view 标签里      // :随便起的名字  绑定一个值后可以由该值接收数据      // http://localhost:8080/#  /a/     aa      // /a/父级路由对应上了  剩下的值就由绑定的值接收      {path: 'aa', component: aa},      {path: ':id', component: aaa}      ]}  ]})// 使用路由插件Vue.use(Router)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  render: h => h(App)// 传递一个参数: 让页面默认显示的模板 return})

说明：

1、通过网址传值，在路由的路径处绑定一个值，然后通过绑定的值就可以动态传值了

2、通过$route.params 接收传递的动态值

3、最后得到的值就是通过网址传递过来的值

2、通过网址传值（通过query传值直接:to="{ path:'/b',query:{ id:123 } }"  传递的方式是明文的 在网址后面会加上 ?xxx=xxx）

项目文件下src下的main.js文件里面的代码如下，其他地方不动

// 这里是主文件import Vue from 'vue' // 引入vueimport Router from 'vue-router' // 引入路由插件 路径 没有 ./ /  直接写名字是找的node_modules目录下的文件const App = {// 默认模板  template: `<div id="app">    默认显示的内容    <ul>      <li><router-link to="/">index</router-link></li>      <li><router-link to="/about">about</router-link></li>      <li><router-link :to="{ path:'/b',query:{id:123} }">bb</router-link></li>    </ul>    <router-view></router-view>  </div>`}const index = {// 首页模板  template: `<div>这里是index</div>`}const about = {// about页模板  template: `<div>这里是about</div>`}const b = {// b页模板  template: `<div>这里是b</div>`,  mounted () {    console.log(this.$route)  }}// 必须放在后面 因为前面声明模板用的是const ES6的语法，必须先声明后调用const router = new Router({// 跟路由显示的地方是第一个 router-view 标签里  routes: [// 在routes里面的称之为跟路由    {path: '/', component: index},    {path: '/about', component: about},    {path: '/b', component: b}  ]})// 使用路由插件Vue.use(Router)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  render: h => h(App)// 传递一个参数: 让页面默认显示的模板 return})

说明：

运行结果：传的值会在网址路径上显示出来

3、通过网址传值（params传值方式 必须是通过name去寻找对应的路由 才可以获取到数据）

项目文件下src下的main.js文件里面的代码如下，其他地方不动

// 这里是主文件import Vue from 'vue' // 引入vueimport Router from 'vue-router' // 引入路由插件 路径 没有 ./ /  直接写名字是找的node_modules目录下的文件const App = {// 默认模板  template: `<div id="app">    默认显示的内容    <ul>      <li><router-link to="/">index</router-link></li>      <li><router-link to="/about">about</router-link></li>      <li><router-link :to="{ name:'b',params:{id:123} }">bb</router-link></li>    </ul>    <router-view></router-view>  </div>`}const index = {// 首页模板  template: `<div>这里是index</div>`}const about = {// about页模板  template: `<div>这里是about</div>`}const b = {// b页模板  template: `<div>这里是b</div>`,  mounted () {    console.log(this.$route)  }}// 必须放在后面 因为前面声明模板用的是const ES6的语法，必须先声明后调用const router = new Router({// 跟路由显示的地方是第一个 router-view 标签里  routes: [// 在routes里面的称之为跟路由    {path: '/', component: index},    {path: '/about', component: about},    {path: '/b', name: 'b', component: b}  ]})// 使用路由插件Vue.use(Router)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  render: h => h(App)// 传递一个参数: 让页面默认显示的模板 return})

说明：同2相比，不能直接通过path了，需要通过name去寻找对应的路由，然后才可以传值

运行结果：