Vue之 路由动态路由 嵌套路由 JS指定路由

动态路由1

//1.创建组件
import Content from ‘./components/Content.vue’;
//2.配置路由 注意：名字

const routes = [
  { path: '/content/:aid', component: Content },   /*动态路由*/
]`

3.在对应的显示的页面

    this .$route.params        获取动态路由的值

4.点击跳转到显示页面

   <ul>
         <li v-for="(item,key) in list" :key="item.id" >
        <router-link :to="'/content/'+ key" > {
  {key}}~~~ {
  {item}}</router-link> </li>
    </ul>
 

动态路由2

//1.创建组件

import Pcontent from './components/pcontent.vue';

//2.配置路由 注意：名字

const routes = [
  { path: '/pcontent', component: Pcontent },/*get 动态路由*/
]

3.在对应的显示的页面

this.$route.query

4.点击跳转到显示页面

 <ul>
   <li v-for="(item,key) in list" :key="item.id" >
   <router-link :to="'/Pcontent?aid='+ key" > {
  {key}}~~~ {
  {item}}</router-link>
 </li>
 </ul>

路由结合请求数据

//1.创建组件

import Content from ‘./components/Content.vue’;
//2.配置路由 注意：