vue路由，，包含静态路由和动态

1.vue路由的定义和使用

 

1）静态路由的定义：

固定路由的路径在index.js中的routes数组中;基本格式示例如下

​
{
    path: '/list',//url的名称，在浏览器地址栏的输入内容
    name: 'list',//路由的名称
    meta:{  //需要给路由定义自定义属性时，必须写在这个对象中
          isLogin:true
    },
    component: list //路由指向的组件
    //component:()=>import("@/views/router/home.vue")
  },

​

使用示例：localhost/8080/ localhost/8080/list

1）动态路由的定义：

{
    path: '/list/:id',//url的名称，在浏览器地址栏的输入内容
    name: 'list',//路由的名称
    meta:{  //需要给路由定义自定义属性时，必须写在这个对象中
          isLogin:true
    },
    component: list //路由指向的组件
    //component:()=>import("@/views/router/home.vue")
  }, 

在静态路由的基础上加上“ : ”就是动态路由

使用示例：localhost/8080/ localhost/8080/list

3）定义路由响应的变化：

watch:{
    $route(to,from){
      this.name=to.params.name;
    }
  }

4)定义嵌套路由：

{
    path: '/routerView/home',
    name: 'routerViewHome',
    component: () => import(/* webpackChunkName: "about" */ '../views/router/routerView/home.vue'),
    children:[
      {
        path: '/hm',
        name: 'hm',
        component: () => import(/* webpackChunkName: "about" */ '../views/router/routerView/hm.vue'),
        children:[

        ]
      },
    },

使用children定义嵌套路由

 2.路由的使用

​
<router-link :to=""index'" tag="li" active-class="activeClass">Home</router-link>
​

 

export default {
  methods: {
    handleClick() {
      this.$router.push({ name: "list" });
    },
  },
};

 

 3.路由传值的三种方式

 

 

 

 

 

 

 

由于 整个篇幅较长，一部分是有电脑的时候编辑的，一部分是平板编辑了，上传的截图。