Vue 路由

Posted 2022-08-15 zcccz

路由：路：路径（地址）  由：方向  
    针对于单页面应用，所提供的一个解决方案。根据地址传递的参数，来决定具体要使用的组件。
1、下载(如果已下载该步可以省略)
    cnpm install vue-router -S
2、引入
    import Router from ‘vue-router‘
3、安装：
    Vue.use(Router)
4、生成router对象
    export default new Router(
      mode: ‘history‘,
      base: process.env.BASE_URL,
      routes: [
        
          path: ‘/‘,
          name: ‘home‘,
          component: Home
        ,
        
          path: ‘/about‘,
          name: ‘about‘,
          // route level code-splitting
          // this generates a separate chunk (about.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import(/* webpackChunkName: "about" */ ‘./views/About.vue‘)
        
      ]
    )
**************************************************************
引入组件有两种方法
1、import One from ‘@/views/One‘
    
        path:"/one",
        component:One
    
2、
        
            path:"/two",
            component:()=>import(‘@/views/Two‘)
        
**************************************************
路由如何引入子组件
    1、在components下新建一个文件Child.vue
    2、在路由组件当中使用时
        1、
           import Child from "@/views/Child"
           export default 
                components:
                    Child
                
           
        2、
            export default 
                   name: "one",
                   components:
                       Child:()=>import(‘@/components/Child‘)
                   
               
************************************************
router-view:是一个内置的组件。将符合要求的路由所指向的组件进行渲染的地方。
router-link:是一个内置组件。可以实现组件的切换。
    属性：
        1、to：跳转到什么路由
* 地址是不区分大小写的。对大小写不敏感
* 如果地址相同，以第一次优先。
*****************************************
404:
  
        path:"*",
        component:()=>import("@/views/Error")
    
****************************************
别名：可以通过“/"或“/home"来进行访问
       
            path: ‘/‘,
            name: ‘home‘,
            alias:"/home",
            component: Home
        ,
* ：提供了另外一种访问该路由的方式。
*****************************************
重定向：

  path:"/lalala",
  redirect:"/two"
,
*当你的地址为lalala时，重定向到path为“/two" 的路由
****************************************
如何实现路由的跳转
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>|
      <!--<router-link to="/one">One</router-link>|-->
      <!--<router-link :to="one">One1</router-link>|-->
      <!--<router-link :to="path:‘/one‘">One2</router-link>|-->
      <router-link :to="name:‘xixi‘">One3</router-link>|
      <router-link to="/two">two</router-link>|
*******************************************************************
单页面多路由
       
            path:"/three",
            // component:()=>import("@/views/Three")
            components:
                one:()=>import("@/views/One"),
                two:()=>import("@/views/Two"),
                three:()=>import("@/views/Three"),
                default:()=>import("@/views/MyTwo")
            
        
 template:
  one:<router-view name="one"/>
     <hr/>
     two:<router-view name="two"/>
     <hr/>
     three:<router-view name="three"/>
     <hr>
     <router-view></router-view>
     <hr>
     <router-view></router-view>

*******************************************************************
* this.$route来得到当前路由的配置信息。
路由传值:
    1、query
        1、如何传递
            <router-link to="/query?a=1&b=4">query</router-link>|-->
            <router-link :to="name:‘query‘,query:a:3,b:7">query</router-link>|
            <router-link :to="path:‘/query‘,query:a:1,b:3">query</router-link>|
        2、如何接收
            this.$route.query;// a:xx,b:xxx
        优点：刷新数据不会丢失.还可以传递对象
    2、params
        1、如何传  *：params不可以与你的path结合使用。
       <router-link :to="name:‘params‘,params:a:1,b:3">params</router-link>
       2、接收：
        this.$route.params.// a:1,b:3
        缺点：刷新数据不存在。
    3、设置路由
        1、配置路由
            
                name:"setRouter",
                path:"/setRouter/:a/:b",
                component:()=>import("@/views/SetRouter")
            
        2、传
        <router-link :to="path:‘/setRouter/1/2‘">setRouter</router-link>|
        <router-link :to="path:‘/setRouter/1/2‘">setRouter</router-link>|
        3、接收
            this.$route.params


********************************************************************
路由编程式导航:通过你的JS语句来控制你路由的跳转。
this.$router.push("/");
this.$router.push(name:"query",query:a:5,b:8);
this.$router.push(name:"params",params:a:5,b:8);
this.$router.go(-1):后退
this.$router.go(1):前进