Question

在nuxt.js中，我正在使用bootstrap-vue进行路由。

我可以按照以下说明创建简单的路线

class BindFragment : Fragment(R.layout.fragment_blank) {

    // Scoped to the lifecycle of the fragment's view (between onCreateView and onDestroyView)
    private var fragmentBlankBinding: FragmentBlankBinding? = null

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val binding = FragmentBlankBinding.bind(view)
        fragmentBlankBinding = binding
        binding.textViewFragment.text = getString(string.hello_from_vb_bindfragment)
    }

    override fun onDestroyView() {
        // Consider not storing the binding instance in a field, if not needed.
        fragmentBlankBinding = null
        super.onDestroyView()
    }
}

但是我要关注URL。

<b-nav-item to="/licenses" v-if="isAdmin" active>
    <i class="fas fa-id-badge"></i> Licensing
</b-nav-item>

如何创建它？另外，由于nuxt具有以下结构，因此如何为该路由加载页面文件。

http://localhost:3000/accept-license/N0trTjFISGdLOWxGZ29hZ2h0L2k3UT09/user/NFFEZVZ6ckNoazJOQmdYOXV2dWtXUT09/LV2mi1QDMKmCXn4cNeoOjp1Wx54jtOpI

Answer 1

您可以在NuxtJs中使用Dynamic Nested Routes来获得所需的结果。

您想要的网址：

http://localhost:3000/accept-license/N0trTjFISGdLOWxGZ29hZ2h0L2k3UT09/user/NFFEZVZ6ckNoazJOQmdYOXV2dWtXUT09/LV2mi1QDMKmCXn4cNeoOjp1Wx54jtOpI

出于这个答案的目的，我假设您的网址包含这些部分

~/accept-licene/{licenceid}/user/{userid}/{id}

这可以由NuxtJs中的以下文件夹结构表示。

pages/
  accept-license/
    _licenseid/
      user/
        _userid/
          _id.vue

然后，您可以在b-nav-item中使用命名路线导航到该位置：

<b-nav-item
  :to="{name: 'accept-license-licenseid-user-userid-id', params: {licenseid, userid, id} }">
    Accept License
</b-nav-item>

我创建了这个Sandbox来演示此答案。

Answer 2

这只是@sthotakura出色响应的理论补充。

路由与Bootstrap-vue无关。

routes逻辑由nuxt本身在后台使用vue-routes管理。这里是official nuxt guide

的链接

Nuxt将为页面文件夹中的所有文件创建named routes。嵌套的路由名称使用以下模式创建：文件夹名称之间用破折号“-”

分隔

避免在Pages目录中的文件夹和文件名中使用破折号“-”。它使开发难以进行，并可能导致错误。最好使用小破折号“ _”或cammel大小写。例如：

pages
  index.vue
  licences
    index.vue
    _licence-name
      index.vue

将创建命名路由：

/
licences
licences-licence-name

和

pages
  index.vue
  licences
    licence
      _name.vue
  licences.vue

将创建相同的命名路由

Nuxt Js：如何在bootstrap-vue标签b-nav-item中传递动态参数

2 个答案: