标签: vue-router

我正在使用 v-for 指令来获取 URL 名称。但是，我在将从 v-for 实例获得的值作为 URL 名称传递时遇到困难。

<template>
  <v-list-tile class="pl-5" v-for="choice in choices" :key="choice.name">
    <v-list-title-content>
      <router-link to="'/' + choice.name">
        <v-list-title-title class="white--text headline">
          {{choice.name}}
        </v-list-title-title>
      </router-link>
    </v-list-title-content>
  </v-list-tile>
</template>

<script>
export default{
  data(){
    return{
      choices:[
         name:'A',
         name:'B',
         name:'C',
         name:'D'
      ]    
    }
  }
}
</script>

我有一个以这种方式制作的路由器视图对象

export default new Router({
  linkExactActiveClass: 'active', // active class for *exact* links.
  mode: 'history',
  routes: [
    {
      path: '/admin',
      name: 'dashboard',
      component: Dashboard
    },
    {
      path: '/company',
      name: 'company',
      component: ObjectList,
      props: {
        url: '/web/company',
        idColumn: 'companyId'
      }
    }
  ]
})

当我点击 /company 链接时，路由器正确地将我发送到ObjectList组件

在这个页面中，我有一个以这种方式制作的简单分页组件

<template>
  <div class="overflow-auto">
    <b-pagination-nav
      align="center"
      :link-gen="linkGen"
      :number-of-pages="totalPages"
      use-router
    ></b-pagination-nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  name: "pagination",
  props: {
    current: Number,
    url: String,
    totalPages: Number
  }, …

我正在尝试获取查询 param code，但$route.query始终为空。我根据文档使用了功能模式。有什么不见了？

路由器：

// use vue-router
import Router from 'vue-router'
Vue.use(Router)

// create router
const router = new Router({
  routes: [
    {
      path: '/',
      component: Home,
      props: (route) => ({ code: route.query.code })
    }
  ]
})

主页.vue

<template>
  <div>
    <Navbar />
      <FlatHeader />
      <v-content>
        <ComingSoon />
        <Changes />
        <EmailSubscribe />   
      </v-content>
    <AuthorizationModal />
  </div> 
</template>

<script>
import AuthorizationModal from './components/AuthorizationModal';
import FlatHeader from './components/FlatHeader';
import ComingSoon from './components/ComingSoon';
import Changes from './components/Changes';
import EmailSubscribe from './components/EmailSubscribe'; …

我正在尝试使用 vue-router。但是，我遇到了一个问题，在查看了许多文章和文档后找不到解决方案。

我已经阅读了几篇关于如何使用 vue-router 的文章，但它们不起作用。

这是我的代码。我做了三个组件Home Login HelloWorld

我做了三个路线。

这是代码

主要.js：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
// import Home from './components/Home.vue';
import HelloWorld from './components/HelloWorld.vue';
import Login from './components/Login.vue';


Vue.use(VueRouter)

Vue.config.productionTip = false


const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/hello', component: HelloWorld },
    { path: '/login', component: Login },
    { path: '/', component: App }
  ]
});


new Vue({
  router,
  render: h => h(App),
}).$mount('#app') …

我使用 Vue-cli 3 制作了一个 Vue JS 应用程序。然后我将该应用程序部署到我的网站，一切都很好。当我查看网站的源代码时，我看到了这个 webpack 文件夹。

我问自己为什么我的所有组件都在那里可见。我对此进行了很多搜索，但没有找到任何相关信息。我的问题是这是否意味着这样，以及我是否可以部署我的 Vue JS 应用程序而我的组件在源代码中不可见。

如何使用路由器链接导航到当前路线并重新运行挂载钩子？

HTML

<!-- Include the library in the page -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router"></script>

<!-- App -->
<div id="app">
  <nav>
    <router-link :to="{ name: 'home' }" exact>Home</router-link>
       <router-link :to="{ name: 'about' }" @click.native.prevent="router.push({ name: 'about' })">About</router-link>
  </nav>

  <router-view :key="$route.fullPath"></router-view>
</div>

JS

console.clear()
console.log('Yes! We are using Vue version', Vue.version)

Vue.use(VueRouter)

const Home = {
    template: `<h1>Home</h1>`,
}

const About = {
    template: `<h1>{{new Date()}}</h1>`,
  mounted(){
    console.log('mounted')
  }
}
const routes = [
    { path: '/', name: 'home', component: Home },
  { …

我正在尝试使用可与 vue-router 一起使用的 bootstrap-vue 制作导航栏。导航栏运行正常，但是当我单击导航栏项目时，它不会将我路由到该页面。在我合并 bootstrap-vue 之前，路由器正在工作，所以我猜我错过了一些与 bootstrap 相关的东西？有任何想法吗？

导航栏.vue :

<template>
    <div>
        <b-navbar 
            toggleable="lg"
            type="light"
            variant="light"
        >
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
            <b-collapse id="nav-collapse" is-nav>
                <b-navbar-nav>
                    <b-link
                        active-class="active"
                        class="nav-link"
                        v-for="routes in links"
                        :key="routes.id"
                        :to="routes.path"
                    >
                        <b-nav-item>
                            {{ routes.name }}
                        </b-nav-item>
                    </b-link>
                </b-navbar-nav>
            </b-collapse>
        </b-navbar>

        <router-view></router-view>
    </div>
</template>

<script>

export default {
    name: 'Navbar',
    data() {
        return {
            links: [
                {
                    id: 0,
                    name: 'Home',
                    path: '/',
                },
                {
                    id: 1,
                    name: 'RSVP',
                    path: '/RSVP',
                },
                {
                    id: 2,
                    name: 'Pictures',
                    path: '/pictures', …

我有一个带有<router-link>查看标签的主页。这是一个简单的主/明细关系，其中Homepage是产品目录，Product明细页面/视图显示每个项目的信息。

当我第一次启动网站并单击Homepage视图上的一个项目（例如 URL: http://localhost:8080/100-sql-server-2019-licence）时，Product视图被加载并且产品详细信息加载正常。

如果我然后按浏览器中的后退按钮返回到Homepage，然后单击不同的Product（例如 URL: http://localhost:8080/101-oracle-12c-licence），则浏览器地址栏中的 URL 会更改，但我会获得以前产品的信息。它闪电般快速，并且没有完成新的网络调用，这意味着它只显示先前产品的缓存页面。如果我在该页面上点击刷新按钮，则会进行网络调用并显示正确的产品信息。

我在网上进行了搜索，但在搜索结果中找不到描述的这个问题。谁能指出我如何在路线更改时刷新/重新渲染路线的正确方向？

我试图v-alert根据payment-successful查询参数是true还是有条件地显示false.

这是我尝试过的：

<v-alert v-if="$route.query.payment-successful == true" type="success" dismissible>
  I'm an alert
</v-alert>

但它似乎不起作用，因为当我设置查询参数时没有显示警报。我也尝试将$route.query.payment-successful引号放在引号之间，但它也不起作用。