vue-router 二级路由

本文介绍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>
  `
});
### 一级路由与 Layout 集成 为了实现一级路由配合 `Layout` 组件使用的效果,通常的做法是在应用的主要入口文件中定义顶层的 `<RouterView>`,并通过嵌套路由的方式让不同的一级路由指向各自的子视图。这种方式可以确保每个一级路由都能拥有独立的内容区域,并且可以在这些区域内进一步划分更细粒度的页面结构。 #### 定义基础路由配置 首先,在项目的根目录下创建或编辑现有的路由配置文件(通常是 `src/router/index.js` 或类似的路径),按照如下方式设置: ```javascript import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' // 假设这是首页组件 import DashboardLayout from '../layouts/DashboardLayout.vue' const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/dashboard', name: 'Dashboard', component: DashboardLayout, children: [ { path: '', redirect: to => ({name: 'Overview'}) }, { path: ':id', props: true, name: 'DetailPage', component: () => import('../views/DetailView.vue') } ] } ] const router = createRouter({ history: createWebHistory(), routes }) export default router; ``` 这段代码展示了如何为 `/dashboard` 路径指定一个名为 `DashboardLayout` 的布局容器作为其父组件[^2]。当访问该路径下的任何子路径时,实际渲染的是这个布局内的特定内容页。 #### 创建 Layout 组件 接下来,构建用于包裹其他页面内容的 `DashboardLayout.vue` 文件,它应该包含两个主要部分:一个是固定的导航栏或其他公共元素;另一个则是用来展示具体页面内容的地方——即第二个 `<RouterView>` 标签的位置。 ```html <template> <div class="layout-container"> <!-- 上方固定头部 --> <header>这里是顶部菜单</header> <!-- 主体内容区 --> <main> <router-view></router-view> </main> <!-- 可选底部版权信息等 --> <footer>© Copyright Info</footer> </div> </template> <script setup lang="ts"> // 如果有需要的话,这里还可以导入并注册一些全局使用的工具函数或者样式表之类的资源 </script> <style scoped> /* 添加必要的CSS样式 */ .layout-container { display: flex; flex-direction: column; min-height: 100vh; } header, footer { background-color: #f8f9fa; padding: 1rem; } </style> ``` 上述模板说明了怎样设计一个简单的仪表板风格的布局,其中包含了顶部横幅以及放置动态加载页面位置的核心标记[^3]。 通过这样的架构模式,不仅能够轻松管理多层级的应用界面逻辑,而且还能保持良好的用户体验一致性。对于大型单页应用程序来说尤其重要,因为这有助于减少不必要的重复工作量的同时提高维护效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值