编程氏导航

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <!-- 自定义跳转事件 -->
    <button @click="goEvent()">跳转到ME</button>
  </div>
</template>

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  methods:{
    goEvent:function(){
      // 通过路径传跳转
      this.$router.push({
        path:"/Me"
      })

    }
  }
}
</script>

其他传参方式

 this.$router.push({
        name:"Me"  // 通过名字跳转
      })

this.$router.push({
        name:"New", 
          // path:"/New/456" 这样传也可以
        // 传参url 如:http://192.168.1.101:8080/new/456
        params :{
          id:456
        }

如果是url?这的参数，可以这样写,点击后跳转为http://192.168.1.101:8080/New/456?name=test&pwd=123456

 goEvent:function(){
      this.$router.push({
        path:"New/456", 
        query :{
          name:"test",
          pwd: "123456"
        }
      })

更多编程式导航参考：这里

命明视图

App.vue有三个路由

<template>
  <div id="app">
    <!--导航路由-->
    <router-view name="nav"/>
    <!--侧边栏路由-->
    <router-view name="side"/>
    <!--默认是内容路由-->
    <router-view/>

  </div>
</template>

在index.js中声明


const routes = [
  {
    path: '/',
    name: 'Home',
    // 原来是直接声明，现在是用components根据路由的name导入子组件的方式
    // component: Home，
    components:{
      nav:navView,
      side:sideView,
      default:Home
    }
  },
// 表示当访问/a时，自动跳转到指定页面
  {
  path: '/a',
    // redirect: "/about"
    redirect:(to) =>{
      console.log(to)
      return {name:"New", params:{id: "456"}}}
    },
  },

当输入/a?go=xxx跳转

  {
    path: '/a',
    // redirect: "/about"
    redirect:(to) =>{
      console.log(to)
      if (to.query.go=="about") {
        return {name:"About"}
      } else {
        return {name:"New", params:{id: "456"}}}

      }

更多参考

组件化传参

index.js 新闻组件的设置

  {
    path: "/new/:id",
    name: "New",
    // 设置为真
     props: true,,
    component: New
  },

在新闻组件取值

<template>
    <div class="content">
        <!-- 新闻内容:{{$route.params.id}} -->
        新闻内容:{{id}}

    </div>
</template>
<script>
export default {
   // 取值
    props:["id"],
    mounted() {
        console.log(this)
    },
}
</script>

index.js还可以采用函数的方式传送query和params的值

// index.js
  {
    path: "/new/:id",
    name: "New",
    // props: true,
    props:function(route) {
      return {
        id: route.params.id,
        username:route.query.username
      }
    },
    component: New
  
// New.vue
<template>
    <div class="content">
        <!-- 新闻内容:{{$route.params.id}} -->
        新闻内容:{{id}}---用户名:{{username}}

    </div>
</template>
<script>
export default {
    props:["id","username"],
    mounted() {
        console.log(this)
    },
}
</script>

image.png

参考官网

路由原信息

当某些页面需要登录时，可以设置路由原信息，关键字为meta
index.js

  {
    path: '/about',
    name: 'About',
    meta:{isAuth:true},
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }

在index.js中设置js脚本信息

router.beforeEach((to, from, next) =>{
  next()
  let isLogin = false
  if (to.meta.isAuth && isLogin) {
      next()
   }
    else {
      next({path:"/login"})
  }

})