账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue router 能否自动配置 router对象
    46
    0

    比如 router/index.js 中配置router对象:

    Vue.use(Router)
    export default new Router({
      mode: 'hash', // Demo is living in GitHub.io, so required!
      // history: true,
      // saveScrollPosition: true,
      linkActiveClass: 'open active',
      scrollBehavior: () => ({ y: 0 }),
      routes: [
    

    其中大部分内容为固定格式:

                { path: 'doc01', name: 'doc01', component: require('../urls/edit/Doc01.vue') },
                { path: 'doc02', name: 'doc02', component: require('../urls/edit/Doc02.vue') },
                { path: 'doc03', name: 'doc03', component: require('../urls/edit/Doc03.vue') },
                { path: 'doc04', name: 'doc04', component: require('../urls/edit/Doc04.vue') },
                { path: 'doc05', name: 'doc05', component: require('../urls/edit/Doc05.vue') },
                { path: 'doc06', name: 'doc06', component: require('../urls/edit/Doc06.vue') },
                { path: 'doc07', name: 'doc07', component: require('../urls/edit/Doc07.vue') },
                ........
    

    可否通过规则自动生成上面的代码?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 突然疏远 普通会员 1楼

      Vue Router 是一个路由管理工具,它可以帮助你管理多个路由和它们的对应的视图。它可以自动配置路由对象,但这通常不是通过使用路由管理插件实现的,而是通过在你的Vue组件中使用 router 变量来手动设置路由对象。

      以下是一个简单的例子:

      javascript export default { data() { return { router: {} } }, created() { this.router = { // 设置默认的路由 routes: [ { path: '/', component: Home }, // 设置自定义的路由 { path: '/about', component: About }, ] } } }

      在这个例子中,router 是一个对象,它包含了路由的路径、组件和过渡等信息。你可以在这个对象中添加、删除或修改路由。

      如果你想要让 Vue Router 自动配置路由对象,你可能需要使用路由管理插件。例如,vue-router-link 插件可以自动配置默认的路由。以下是一个使用 vue-router-link 插件的例子:

      ```javascript import { Link } from 'vue-router-link'

      export default { data() { return { router: {} } }, created() { this.router = { routes: [ { path: '/', component: Home }, { path: '/about', component: About }, ] } }, beforeRouteUpdate(to, from, next) { const link = Link(to, { name: to.name }) this.router.routes.push(link) next() } } ```

      在这个例子中,beforeRouteUpdate 方法在每次路由更新时都会被调用。它会创建一个新的 Link,并将其添加到 router.routes 数组中。然后,它会调用 next() 方法,引导组件跳转到新的路由。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部