You are looking for the Router instance’s resolve method: Given location in form same as used in <router-link/>, returns object with the following resolved properties: { location: Location; route: Route; href: string; } In your case you could do something like this to get the url: let props = this.$router.resolve({ name: ‘ProductDetail’, params: { id: … Read more
You can just do this: import { useRoute } from ‘vue-router’; export default { setup() { const route = useRoute(); // Now you can access params like: console.log(route.params.id); } };
.eslintrc.js parserOptions: { parser: ‘babel-eslint’, sourceType: ‘module’, allowImportExportEverywhere: true } Should Be: parser: ‘babel-eslint’, parserOptions: { sourceType: ‘module’, allowImportExportEverywhere: true } Source: https://eslint.org/docs/user-guide/configuring#specifying-parser With (@vue/cli) .eslintrc.json { “parser”: “vue-eslint-parser”, “parserOptions”: { “parser”: “babel-eslint”, “ecmaVersion”: 8, “sourceType”: “module” } }
You can use <router-link :is=”isDisabled ? ‘span’ : ‘router-link'” to=”/link” > /link </router-link>
Because you are using router in hash mode, you will not be able to scroll that easily because scrolling to /#something will actually redirect you to ‘something’ page. You will have to emulate scrolling behaviour on your own, try doing something like that: //P.S. the code is written for Vue 2. //You will have to … Read more
The name when you add it to Vue must be router. import router from ‘./routes.js’ const app = new Vue({ el: ‘#app’, router, render: h => h(App) }) If, for whatever reason, you want to call the variable routes you could assign it this way. import routes from ‘./routes.js’ const app = new Vue({ el: … Read more
You’re probably loading the files from disk (“file://”) and the browser history API pushstate doesn’t work when files are loaded from “file://”. It works when you remove “mode: history” from the router because it defaults to using hashes.
It can work by using props’s Function mode and params Vue 2 demo: https://jsfiddle.net/hacg6ody/ when adding routes, use props’s Function mode so that it has a default property user and it will add route.params as props. { path: ‘/create’, name: ‘create’, component: CreateComponent, props: (route) => ({ user: userData, …route.params }) } params passed in … Read more
Here’s my two cents. You don’t need to import vuex-router-sync if you cannot figure out its use case in your project, but you may want it when you are trying to use route object in your vuex‘s method (this.$route won’t work well in vuex’s realm). I’d like to give an example here. Suppose you want … Read more
As stated in this jsFiddle: http://jsfiddle.net/posva/wtpuevc6/ , you have no obligation to use webpack or .vue files. The code below is not from me and all credit goes to this jsFiddle creator: Create an index.html file: <script src=”https://npmcdn.com/vue/dist/vue.js”></script> <script src=”https://npmcdn.com/vue-router/dist/vue-router.js”></script> <script src=”/js/Home.js”></script> <script src=”/js/Foo.js”></script> <script src=”/js/router.js”></script> <script src=”/js/index.js”></script> <div id=”app”> <router-link to=”https://stackoverflow.com/”>/home</router-link> <router-link to=”/foo”>/foo</router-link> <router-view></router-view> … Read more