第4章 vue全家桶（vue-router+vuex）- 4.11 命名视图的使用

最新推荐文章于 2024-02-27 22:03:28 发布

longfei815

最新推荐文章于 2024-02-27 22:03:28 发布

阅读量302

点赞数

文章标签： vue.js javascript 前端前端框架 html

本文链接：https://blog.csdn.net/jolinoy/article/details/123299923

版权

首先看下整个项目目录：

本文章只能讲解一些使用方法。

项目通过vue-router创建，项目创建后，更改过的代码在下面展示出来：

index.js代码：

// index.js里面的内容

import Vue from 'vue';
// 1.导入
import VueRouter from 'vue-router';
// 2.模块化机制，使用Router
import Home from '../views/Home.vue';
import User from '@/views/User';  //@等同于..
// 3.创建路由器对象

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',  //history模式，是干净的路由地址，即在地址栏里面没有#
  base: process.env.BASE_URL,
  // routes
  routes:[
    {
      path:'/',
      // redirect:'/home'
      redirect:{name:'home'} //路由重定向，即：http://localhost:8083回车跳转到http://localhost:8083/home，显示页面还是同一个页面。
    },
    {
      path: '/home',
      name: 'home',
      // component: HomeView
      components:{  //命名视图步骤2：
        default:Home, //默认的名字
        main:()=>import('@/views/Main'),
        sideBar:()=>import('@//views/SideBar')
      }
    },
    //同一个路径可以匹配多个路由，匹配的优先级按照路由的定义顺序：谁先定义的，谁的优先级最高
    {
      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')
    },
    // {
    //   path:'/about',
    //   name:'about',
    //   component:HomeView
    // },
    {
      path:'/user/:id',  //:id就是动态路由匹配
      name:'user',
      component:User,
      // props:true  //传值1.props值为true时，将path里面的id传递给component里面的User.vue里面。
      
      //下面是通过props传id和title。
      props:(route)=>({
        id:route.params.id,
        title:route.query.title
      }),
      children:[  //嵌套路由的使用步骤2：创建子组件children
        {
          path:'profile', //这里一定不能加/，因为/在路由中已经存在了。
          component:()=>import('@/views/Profile')
        },
        {
          path:'posts',
          component:()=>import('@/views/Posts')
        },
      ]
    },
    //http://localhost:8083/page?id=1&title=foo   query
    {
      path:'/page',
      name:'page',
      component:()=>import('@/views/Page'),  //这里的方法等同于import page from '../views/Page.vue'
      alias:'/aaa'  //给路由起别名
      //给路由起别名(用的很少)http://localhost:8083/user/page?id=1&title=foo和http://localhost:8083/aaa都可以访问Page页面
    },
    {
      path:'/user-*',  //*是通配符
      component:()=>('@/views/User-admin')
    }, 
    {
      path:'*',
      component:()=>import('@/views/404')  //路由的执行顺序是从上到下，所以404永远要放在最后面。
    }
  
  ]
})

export default router


// http://localhost:8081/user/1
// http://localhost:8081/user/2
// 同一个页面



//路由跳转：前端和后端结构不一样，就需要使用嵌套路由了。
//总共分四步搭建嵌套路由。
//嵌套路由的使用步骤1：在views文件夹下面新建两个组件Posts.vue和Profile.vue


//命名视图步骤1：首先在views文件夹下面新建两个组件Main.vue和SideBar.vue

main.js代码：

// main.js里面的内容

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  // 4.挂载到vue实例中
  router,
  render: h => h(App)
}).$mount('#app')

App.vue代码：

// App.vue里面的内容

<template>
  <div id="app">
    <nav> <!-- //<nav> 标签定义导航链接的部分 -->
      <!-- //router_link相当于a标签，to属性相当于a标签的href -->

      <!-- //<router-link to="/">Home</router-link> | 这是静态路由
      <//router-link to="/about">About</> -->
      <router-link :to="{name:'home'}">Home</router-link> | <!-- 加：，这是动态路由 -->
      <router-link :to="{name:'about'}">About</router-link> |
      <!-- 声名式导航 -->
      <router-link :to="{name:'user',params:{id:1}}">User1</router-link>  |  <!-- //params是参数的意思。 -->
      <router-link :to="{name:'user',params:{id:2}}">User2</router-link>  |
      <router-link :to="{name:'page',query:{id:1,title:'foo'}}">Page</router-link>  |
      <!-- 路由嵌套 -->
      <router-link to='user/1/profile'>user/1/profile</router-link>  |   <!-- //嵌套路由的使用步骤3：定制路由跳转-->
      <router-link to='user/1/posts'>user/1/posts</router-link>
      <!-- //router-view相当于路由组件的出口 -->
    </nav>
    <router-view/>  <!-- router-view是路由出口，在这里渲染Home -->      
    <router-view name="main" class="main"></router-view>  <!--命名视图步骤3：添加渲染-->
    <router-view name="sideBar" class="sideBar"></router-view>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

404.vue代码：

// 404.vue里面的内容

<template>
    <div>
        <h3>404页面</h3>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

About.vue代码：

// About.vue里面的内容

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

Home.vue代码：

// Home.vue里面的内容

<template>
  <div class="home">
    <h1>我是首页</h1>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

Main.vue代码：

<template>
    <div>
        <h2>main主要内容</h2>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

Page.vue代码：

// Page.vue里面的内容

<template>
    <div>
        <h3>Page页面</h3>
    </div>
</template>

<script>
    export default {
        created () {
            // console.log(this.$route);
            const {id,title} = this.$route.query;
            console.log(id,title);  //输出1,'foo'
            //拿到id,title后，就可以和后端进行交互了。
        },
    }
</script>

<style lang="scss" scoped>

</style>

Posts.vue代码：

// Posts.vue里面的内容

<template>
    <div>
        <h2>Posts</h2>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

Profile.vue代码：

<template>
    <div>
        <h2>Profile</h2>
    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="scss" scoped>

</style>

SideBar.vue代码：

// SideBar.vue里面的内容

<template>
    <div>
        <h2>sideBar侧边栏主要内容</h2>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

User-admin.vue代码：

// User-admin里面的内容

<template>
    <div>
        <h1>User-admin页面</h1>
        <h2>{{$route.params.pathMatch}}</h2>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

User.vue代码：

// User.vue里面的内容

<template>
    <div>
        <div>用户页面 {{$route.params.id}}</div>
        <!-- <div>用户页面{{id}}</div>   //传值3.这里直接调用props传递过来的id使用。 -->
        <div>用户页面 {{id}}-{{title}}</div>  
        <button @click="goHome">跳转到首页</button> <!-- 编程式导航1.添加跳转按钮，添加事件！ -->
        <button @click="goBack">后退</button>
        <!-- 子路由组件出口 -->
        <router-view></router-view> <!-- 嵌套路由的使用步骤4：渲染子路由组件出口-->
        <!-- router-view是路由的出口 -->
    </div>
</template>

<script>
    export default {
        //当路由参数变化时 /user/1切换到/user/2原来的组件实例会被复用
        //因为两个路由渲染了同个组件    复用高效
        created(){
            console.log(this.$route.params.id);
            console.log(this.$route);
        },
        methods:{   //编程式导航2.添加跳转事件方法！这两步即可实现！
            goBack(){
                this.$router.go(-1);    //这里-1表示后退，0表示刷新，1表示前进！
            },
            goHome(){
                // 编程式导航
                // this.$router.push('/'); //方法1：这是字符串方法
                // this.$router.push('name');   //方法2：
                this.$router.push({ //方法3：这是对象方法！
                    path:'/'
                });
                // this.$router.push({ //方法4：跳转到用户2页面
                //     name:'user',
                //     params:{id:2}
                // });
                // this.$router.push({ //方法5：跳转到注册页面
                //     path:'/register',
                //     query:{plan:'123'}
                // });
            }
        },
        // props:['id'],   //传值2.props接收传递过来的id。
        props:['id','title'],   
        //响应路由参数的变化
        // watch:{
        //     $route:(to,from)=>{ //to是到哪里去，from是来自哪里
        //         console.log(to.params.id);
        //         //发起ajax 请求后端接口数据 数据驱动视图
        //     }
        // }
        beforeRouteUpdate(to,from,next){
            console.log(to.params.id);

            //一定要调用next，不然会阻塞整个路由  放行
            next();
        }
    }
</script>

<style lang="scss" scoped>

</style>

上面是项目所有改动过的代码。

下面讲述本文章所说的内容：

//命名视图总共分为3步骤：
//命名视图步骤1：首先在views文件夹下面新建两个组件Main.vue和SideBar.vue
//命名视图步骤2：在index.js里面挂载侧边栏。
//命名视图步骤3：在App.vue添加渲染

每一步在相应的代码里面都有备注。

运行的结果为：