时间戳

首页 > 解决方案 > vuerouter 编辑链接，我是否存储状态？

vue.js - vuerouter 编辑链接，我是否存储状态？

问题描述

我真的是第一次使用 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.jsvue-router

解决方案

为了生成 url，你想要的是在路由上使用 v-bind，你可以通过用 ":to" 替换 "to" 来做到这一点一旦你有了它，属性 ":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 仅适用于当前选项卡（除非您使用一些代码将其与本地存储同步，例如此示例），即使那样它也不会跨机器保留它。

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>

推荐阅读