vue 编程性导航+命名路由+命名视图

简单例子

通过路由只能实现简单的跳转,但是跳转时我们常常需要做一些判断 需要用到编程性导航
简单带参数例子

<template>
  <div id="app">
    <div id="nav">
      <br>
      <router-link to="/user/5/profile">5号档案</router-link>
      <br><br>
      <router-link to="/user/5/posts">5号岗位</router-link>
      <br><br>
      <button @click="goUser(5)">goUser</button>
    </div>
    <router-view/>
  </div>
</template>

<script>

  export default {

    methods:{
        goUser(tempid){
          this.$router.push({
            name : `User`,
            params : {
                id:tempid
            }
          })
        },
    }
  }
</script>

<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>

命名路由

简单例子
<router-link :to="{name : 'User',params : {id:5}}">使用命名路由跳转</router-link>

命名视图

通过命名视图来区别不同视图区,使得编程更加容易
简单例子:
编写一个footer和sidebar组件，在然后网页跳转时都显示该组件

<template>
  <h3>这是sidebar组件</h3>
</template>

<script>
export default {
  name: "sidebar"
}
</script>

<style scoped>

</style>

footer同理
在index.js配置路由信息里使用compents

 {
    path: '/',//链接地址
    name: 'Home',//别名
    components: {
      default : Home,
      sidebar : sidebar,//前面是视图名 后面是导入的组件名
      footer : footer
    }
  },

在app.vue里使用3次组件视图 同时将其中的两个视图定义名字

 <router-view name="sidebar"></router-view>
    <router-view/>
    <router-view name="footer"></router-view>

效果