vue-router 二级路由

最新推荐文章于 2025-08-06 23:22:06 发布

wandoumm

最新推荐文章于 2025-08-06 23:22:06 发布

阅读量2.3k

点赞数 1

分类专栏： Vue router

Vue router 专栏收录该内容

14 篇文章

订阅专栏

本文介绍Vue.js中路由配置及组件的使用方法，包括如何设置路由、组件间的通信、路由钩子函数的应用等，适合初学者理解Vue路由的工作原理。

//import导入  Vue(自己起的名) from 从  vue
import Vue from 'vue'
//引进路由
import Vuerouter from 'vue-router'
//使用vuerouter
Vue.use(Vuerouter);
 
//创建局部组件
const Index={
  template:`<div>
            <h2>这是首页</h2>
            <router-view></router-view>
      </div>`,
  //监听路由变化  to是去的路径  from是来的路径
  watch:{
    '$route'(to,from){
      console.log(arguments);
      console.log(to);
    }
  },
  /*beforeRouteUpdate(to,from,next){
    console.log(arguments);
    console.log(next);
  }*/
  beforeRouteUpdate (to, from, next) {
    console.log(arguments);
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    next()
  },
};
const New={
  template:`<div>
            <h2>这是新闻</h2>
           <router-view></router-view>
  </div>`
};
const Zixun={
  template:`<div>
            <h2>这是资讯</h2>
           <router-view></router-view>
  </div>`,
  //在调用时候没有访问到实例，但可以通过next对其访问
   beforeRouteEnter (to, from, next) {
     console.log(arguments);
     // 在渲染该组件的对应路由被 confirm 前调用
     // 不！能！获取组件实例 `this`
     // 因为当守卫执行前，组件实例还没被创建
     next(vm=>{
       console.log(vm);
     })
   },
  
   beforeRouteLeave (to, from, next) {
   console.log(arguments);
   // 导航离开该组件的对应路由时调用
   // 可以访问组件实例 `this`
     next()
   }
};
const Hello={
  template:`<h2>这是小首页</h2>`
  
};
const Xnew={
  template:`<h2>这是小新闻</h2>`
};
//实例路由
const router=new Vuerouter({
  mode:"history",       //mode模式  history  h5里面的方法  hash
  base:__dirname,      // base 文件路径 相对路径    filename 绝对路径
  routes:[             //路由配置
    {path:"/index",/*redirect:"/new",*/alias: '/b', component:Index,   //redirect为重定向命名
      //alias为别名   『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么『别名』又是什么呢？
     ///a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
      children:[
        //动态路由路径以冒号开头
        {path:"/index/hello/:id",component:Hello},
        {path:"/index/hello/:id",component:Hello}
      ]
     },   //关联路由
    {path:"/new",component:New,name:'new',
      children:[          //二级路由
        {path:"/new/xnew",component:Xnew },
      ]
    },
    {path:"/zixun",component:Zixun},
  
  ]
});
//路由钩子
/*router.beforeEach((to, from, next) => {     //全局的前置守卫
  console.log(arguments);
  //sessionStorage.setItem('user','')
  //sessionStorage.getItem('user')
  next()
});*/
new Vue({
  el:"#app",
  router,     //开启路由
  template:
    `
  <div>
    <ul>
      <li>
        <router-link to="/index">这是首页</router-link>
        <ol>
          <li><router-link to="/index/hello/123">首页1</router-link></li>
          <li><router-link to="/index/hello/234">首页2</router-link></li>
        </ol>
      </li>
      <li>
        <router-link to="/new">这是新闻</router-link>
        <ol>  <!-- 二级路由的内容-->
          <li><router-link to="/new/xnew">这是小新闻</router-link></li>
        </ol>
      </li>
      <li>
        <router-link to="/zixun">这是资讯</router-link>
      </li>
      <router-view></router-view>
      <ul>{{ $route.params.id }}</ul>
    </ul>
  </div>
  `
});