（二） vue 传值

来源：互联网发布：中国纺织品出口数据图编辑：程序博客网时间：2024/05/22 16:38

index.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>vue-cli</title>  </head>  <body>    <div id="app"></div>    <script src="/dist/build.js"></script>  </body></html>

main.js

import Vue from 'vue'import Router from './Router'

Router.js

/** * Created by Amy on 2017/12/13. */import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)var first  = {template:'<div>first内容</div>'}var second  = {template:'<div>second 内容</div>'}var Home  = {template:'<div>Home 内容</div>'}var firstFirst  = {template:'<div>firstFirst 内容 {{ $route.params.id }} </div>'}var firstSencond  = {template:'<div>firstSecond 内容{{ $route.params.id }}</div>'}var asdf = {  template:`      <div class="asdf">          <h2>组件</h2>          <router-view class="adsf"></router-view>      </div>  `}var router = new VueRouter({  mode:'history',  base: __dirname,  routes:[    {      path:'/',      name:'Home',      component:Home    },    {      path:'/first',      component:asdf,        children:[          {            path:'/',            name:'Home-first',            component:first          },          {            path:'first',            name:'Home-first-First',            component:firstFirst          },          {            path:'second',            name:'Home-Second-Second',            component:firstSencond          },        ]    },    {      path:'/second',      name:'Home-second',      component:second    },  ]})  new Vue({    router,    template:`        <div id="r">            <h1>导航</h1>            <p>{{ $route.name }}</p>            <ol>              <li><router-link to="/">Go to /</router-link></li>              <li><router-link to="/first">Go to first</router-link></li>                  <ol>                      <li><router-link :to="{name:'Home-first-First',params:{id:123}}">firstFirst</router-link></li>                      <li><router-link :to="{name:'Home-Second-Second',params:{id:123456}}">firstSencond</router-link></li>                   </ol>              <li><router-link to="/second">Go to second</router-link></li>            </ol>            <router-view class="asdf"></router-view>        </div>    `  }).$mount('#app')

阅读全文

0 0