vuerouter редактировать ссылку и сохранить ли состояние? - PullRequest
Новая
       27

vuerouter редактировать ссылку и сохранить ли состояние?

0 голосов
/ 14 мая 2019

Я впервые использую 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>

1 Ответ

0 голосов
/ 14 мая 2019

Чтобы сгенерировать 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>

Затем вы можете делать все, что вам нужно в этом компоненте, например, загружать информацию из базы данных для этого конкретного идентификатора.

Кроме того, 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>
...