vuerouter编辑链接，我是否存储状态？

时间：2019-05-14 16:16:54

标签： vue.js vue-router

我真的是第一次使用vuerouter，并且试图将URL名称动态添加到路由的超链接中。不知道我在这里做什么，{{message}}会显示名称，而我正在尝试将其连接到现有的网址上-我在做什么错了？

其次，因为这些页面是动态生成的，所以我会使用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>

1 个答案:

答案 0 :(得分：0)

为了生成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仅在当前选项卡上起作用（除非您使用一些代码将其与本地存储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>

相关问题
最新问题