vue--dynamic Routing and get transfer values

Dynamic routing:

<Template>  <DivID= "News">    <V-header></V-header>    <HR>{{title}}<BR>    <Pv-for= "(x,k) in list">      <!--<router-link to= "/content/123" >{{k}}-{{x}}</router-link> -      <!--because we want to bind our dynamic data, we use: And then we do the stitching . -      <Router-link: to= "'/content/' +k">{{k}}-{{x}}</Router-link>    </P>  </Div></Template><Script>Import Header from'./header.vue'; exportdefault{name:'News', data () {return{title:'I'm a news component .', list:['111','222','3330','444']}}, methods:{}, components:{'V-header': Header,}}</Script>

Click to jump to a detail: You can create a new detail component:

<Template>    <DivID= "Content">{{title}}----{{aid}}</Div></Template><Script>Exportdefault{name:'Header', data () {return{title:'I am a detail page', aid:"',}}, methods:{run () {},}, mounted () {//gets the value of the dynamic route passed overConsole.log ( This. $route. Params); Console.log ( This. $route. params['Aid']);  This. Aid=  This. $route. params['Aid']; }}</Script></Script>

You also need to configure routing at this time:

// 1. Create the component import Header from './components/header.vue'./components/home.vue './components /news.vue './components/content.vue '//  2, configure the route const routes = [  '/home ', Component:home},  '/news ', Component:news  }, '/content ', component:content},  /c13> '/content/:aid ', component:content},  //  default jump route ]

Get Pass Value:

<p vfor = "(x,k) in list" >  <!--<router-link to= "/content?aid=123" >{{k}}-{{x}}</ Router-link>--  <router-link:to= "'/content?aid= ' +k" >{{k}}-{{x}}</router-link></p>

To configure routing:

// 2. Configure the route const routes =  ['/home ', Component:home  },'/news ', Component:news},< c10/>'/content ', component:content},  //  default jump route ]

Get Parameters:

mounted () {    // Gets the value Console.log (this. $route. Query)         for the dynamic route passed over by get. Console.log (this. $route. query[' aid ');      This this. $route. query[' aid '];}

vue--dynamic Routing and get transfer values