文章/答案/技术大牛

发布

社区首页 >问答首页 >vuerouter编辑链接，我存储状态吗？

问vuerouter编辑链接，我存储状态吗？
EN

Stack Overflow用户

提问于 2019-05-15 00:16:54

回答 1查看 45关注 0票数 0

我真的是第一次使用vuerouter，我正在尝试动态添加一个url名称到路由的超链接中。不确定我在这里做什么，{{message}}将显示名称，我正在尝试将其连接到现有的url--我做错了什么？

其次，因为这些页面是动态生成的，所以我会使用vuex来存储状态吗？这样别人就能看到这些页面了？

const Home = { template: '<div>Home</div>' }
const Foo = {
template: '<div>Foo {{n }}, {{b}}</div>',
props: ['n', 'b']
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/', component: Foo, props: route => ({

    })}
  ]
})
        new Vue({
            router,
          el: '#app',
          data: {

              message:''
            }        
          })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
    <head>

            <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
            <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
            <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


            <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
            <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
            <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>

<body class="container">
        <div id="app">

            <h2>Generator</h2>

            <input v-model="message" placeholder="Enter Plan Year"> {{message}} Year<br><br>
            These pages are automatically generated:<br>
            <strong> CardMain_{{message}}.html</strong><br>
           <strong> Card_{{message}}.html</strong><br>
           <strong> state_{{message}}.html</strong><br>
           <strong> Log_{{message}}.html</strong><br>
           <strong> Log2_{{message}}.html</strong><br><br>
           <router-link to="/">/home</router-link>
           <router-link to="url/+'{{message}}+'">eCard</router-link>
           <router-link to="/foo/5/5">Directory</router-link>
           <router-view></router-view>
      
             <p><button class="btn btn-primary">Generate</button></p>
              </div>

vue.js

vue-router

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-15 00:52:12

为了生成url，您想要的是在路由上使用v-bind，您可以通过将" to“替换为": to”来实现这一点：“一旦您有了它，attribute ": to”的内容就像是javascript一样，并且您可以访问vue组件的所有属性，因此您只需执行以下操作：

<router-link to="'url/' + message">eCard</router-link>

然而，这个路由实际上还没有被注册，所以它不会加载任何东西。相反，您可能希望注册接受参数的路径

{ path: '/url/:id', name: 'ecard', component: eCardComponent , props: true }

这样你就可以把你的路线称为

<router-link :to="{ name: 'ecard', params:{ id: message } }">eCard</router-link>

然后，您可以在该组件中执行所需的任何操作，例如从数据库中加载该特定id的信息。

此外，Vuex只能在当前选项卡上运行(除非你使用一些代码将其与本地存储like this example同步)，即使这样，它也不会跨机器运行。

const Home = { template: '<div>Home</div>' }
const eCardComponent = { template: '<div>Ecard :{{id}}</div>', props:['id'] }
const Foo = {
template: '<div>Foo {{n }}, {{b}}</div>',
props: ['n', 'b']
}

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/', component: Foo, props: route => ({

    })},
    { path: '/url/:id', name:'ecard', component: eCardComponent, props: true },
  ]
})
        new Vue({
            router,
          el: '#app',
          data: {

              message:''
            }        
          })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
    <head>

            <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
            <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
            <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


            <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
            <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
            <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>

<body class="container">
        <div id="app">

            <h2>Generator</h2>

            <input v-model="message" placeholder="Enter Plan Year"> {{message}} Year<br><br>
            These pages are automatically generated:<br>
            <strong> CardMain_{{message}}.html</strong><br>
           <strong> Card_{{message}}.html</strong><br>
           <strong> state_{{message}}.html</strong><br>
           <strong> Log_{{message}}.html</strong><br>
           <strong> Log2_{{message}}.html</strong><br><br>
           <router-link to="/">/home</router-link>
           <router-link :to="{ name: 'ecard', params:{ id: message } }">eCard</router-link>
           <router-link to="/foo/5/5">Directory</router-link>
           <router-view></router-view>
      
             <p><button class="btn btn-primary">Generate</button></p>
              </div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56134658

复制

相似问题

问vuerouter编辑链接，我存储状态吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问vuerouter编辑链接，我存储状态吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问vuerouter编辑链接，我存储状态吗？
EN