[Vuejs]-Vuerouter editing link and do I store the state?

by

0👍

✅

In order to generate the url, what you want is to use a v-bind on the route, you can do this by replacing the “to” with “:to”
Once you have that, the content of the attribute “:to” behaves as if it was javascript and you have access to all the properties of the vue component so you can just do:

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

However this route hasnt actually been registerd so it will not load anything.
Instead you may want to register a route that accepts a parameter

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

In this way you can call your route as

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

Then you can do whatever you need in that component, like loading info from a database for that particular id.

Additionally, Vuex only works on the current tab (unless you use some code to syncronize it with the localstorage, like this example) and even then it would not persit it across machines. 

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>

Leave a comment