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定义嵌套路由

vue路由,,包含静态路由和动态_第1张图片

 2.路由的使用

Home

 vue路由,,包含静态路由和动态_第2张图片

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

vue路由,,包含静态路由和动态_第3张图片

 vue路由,,包含静态路由和动态_第4张图片

 3.路由传值的三种方式

vue路由,,包含静态路由和动态_第5张图片

vue路由,,包含静态路由和动态_第6张图片

vue路由,,包含静态路由和动态_第7张图片

vue路由,,包含静态路由和动态_第8张图片

 

 vue路由,,包含静态路由和动态_第9张图片

vue路由,,包含静态路由和动态_第10张图片

vue路由,,包含静态路由和动态_第11张图片 

vue路由,,包含静态路由和动态_第12张图片 

vue路由,,包含静态路由和动态_第13张图片 

vue路由,,包含静态路由和动态_第14张图片 

vue路由,,包含静态路由和动态_第15张图片 

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

你可能感兴趣的:(css3,vue.js,javascript,前端,前端框架)