Just adding a question mark `?` will make it optional.

    {
        path: &#39;/offers/:member?&#39;,
        ...
    },

It works for Vue Router 2.0 onward.

Source: https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122

For advanced routes matching patterns [the manual says][1] :

&gt; vue-router uses **path-to-regexp** as its path matching engine, so it supports many advanced matching patterns such as optional dynamic segments, zero or more / one or more requirements, and even custom regex patterns. Check out its documentation for these advanced patterns, and this example of using them in vue-router.

path-to-regexp page/manual =&gt; https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters

[1]: https://router.vuejs.org/guide/essentials/dynamic-matching.html#advanced-matching-patterns

Additionally, you can also send different params, from where you call your route.

    &lt;router-link
        :to=&quot;{
         name: &#39;ComponentName&#39;,
         params: { member: {}, otherParams: {} }
         }&quot;
    &gt;

When testing a module that has a dependency in a different file and assigning that module to be a `jest.mock`, TypeScript gives an error that the method `mockReturnThisOnce` (or any other `jest.mock` method) does not exist on the dependency, this is because it is previously typed. 

What is the proper way to get TypeScript to inherit the types from `jest.mock`?

Here is a quick example.

Dependency

    const myDep = (name: string) =&gt; name;
    export default myDep;

test.ts

    import * as dep from &#39;../depenendency&#39;;
    jest.mock(&#39;../dependency&#39;);

    it(&#39;should do what I need&#39;, () =&gt; {
      //this throws ts error
      // Property mockReturnValueOnce does not exist on type (name: string)....
      dep.default.mockReturnValueOnce(&#39;return&#39;)
    }

I feel like this is a very common use case and not sure how to properly type this.

Mock dependency in Jest with TypeScript

I migrate to Android studio 3.0. So, the project become unable to compile a module named &quot;:animator&quot; and it displays me this error:

 

     Error:Unable to resolve dependency for
     &#39;:app@dexOptions/compileClasspath&#39;: Could not resolve project
     :animators. &lt;a
     href=&quot;openFile:/home/mobilepowered/MobilePowered/MyInnovalee/trunk17-10-2017/app/build.gradle&quot;&gt;Open
     File&lt;/a&gt;&lt;br&gt;&lt;a href=&quot;Unable to resolve dependency for
     &amp;#39;:app@dexOptions/compileClasspath&amp;#39;: Could not resolve project
     :animators.&quot;&gt;Show Details&lt;/a&gt;
     

and show details gives this log : 

     Unable to resolve dependency for &#39;:app@dexOptions/compileClasspath&#39;:
     Could not resolve project :animators.
     
     Could not resolve project :animators. Required by:
         project :app
     Unable to find a matching configuration of project :animators:
          - Configuration &#39;debugApiElements&#39;:
              - Required com.android.build.api.attributes.BuildTypeAttr &#39;dexOptions&#39; and found incompatible value &#39;debug&#39;.
              - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr &#39;Aar&#39; and
     found compatible value &#39;Aar&#39;.
              - Found com.android.build.gradle.internal.dependency.VariantAttr &#39;debug&#39; but
     wasn&#39;t required.
              - Required org.gradle.api.attributes.Usage &#39;java-api&#39; and found compatible value &#39;java-api&#39;.
          - Configuration &#39;debugRuntimeElements&#39;:
              - Required com.android.build.api.attributes.BuildTypeAttr &#39;dexOptions&#39; and found incompatible value &#39;debug&#39;.
              - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr &#39;Aar&#39; and
     found compatible value &#39;Aar&#39;.
              - Found com.android.build.gradle.internal.dependency.VariantAttr &#39;debug&#39; but
     wasn&#39;t required.
              - Required org.gradle.api.attributes.Usage &#39;java-api&#39; and found incompatible value &#39;java-runtime&#39;.
          - Configuration &#39;releaseApiElements&#39;:
              - Required com.android.build.api.attributes.BuildTypeAttr &#39;dexOptions&#39; and found incompatible value &#39;release&#39;.
              - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr &#39;Aar&#39; and
     found compatible value &#39;Aar&#39;.
              - Found com.android.build.gradle.internal.dependency.VariantAttr &#39;release&#39; but
     wasn&#39;t required.
              - Required org.gradle.api.attributes.Usage &#39;java-api&#39; and found compatible value &#39;java-api&#39;.
          - Configuration &#39;releaseRuntimeElements&#39;:
              - Required com.android.build.api.attributes.BuildTypeAttr &#39;dexOptions&#39; and found incompatible value &#39;release&#39;.
              - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr &#39;Aar&#39; and
     found compatible value &#39;Aar&#39;.
              - Found com.android.build.gradle.internal.dependency.VariantAttr &#39;release&#39; but
     wasn&#39;t required.
              - Required org.gradle.api.attributes.Usage &#39;java-api&#39; and found incompatible value &#39;java-runtime&#39;.

Android studio 3.0: Unable to resolve dependency for :app@dexOptions/compileClasspath&#39;: Could not resolve project :animators

I need to route to a certain component in two ways - one with a param, one without. I have searched for optional params and somehow can&#39;t find much info.

So my route:

    {
		path: &#39;/offers/:member&#39;,
		component: Offers,
		name: &#39;offers&#39;,
		props: true,
		meta: {
			guest: false,
			needsAuth: true
		}
	},

When I call it with the param programmatically, all is fine

    this.$router.push({ path: /offers/1234 });

However I also need to call it via nav like this

    &lt;router-link to=&quot;/offers&quot;&gt;Offers&lt;/router-link&gt;

The `offers` component accepts the prop

    props: [&#39;member&#39;],

And component used as such

    &lt;Offers :offers=&quot;data&quot; :member=&quot;member&quot;&gt;&lt;/Offers&gt;

Now the ugly way I&#39;ve managed to get it working is duplicating the route and making one of them not take props:

    {
		path: &#39;/offers&#39;,
		component: Offers,
		name: &#39;offers&#39;,
		props: false,
		meta: {
			guest: false,
			needsAuth: true
		}
	},

It actually works, but i&#39;m not happy with it - also in dev mode vuejs is warning me `[vue-router] Duplicate named routes definition: { name: &quot;offers&quot;, path: &quot;/offers&quot; }`

Surely there&#39;s a way to do optional param in the component call `:member=&quot;member&quot;` ?

Optional param in vuejs router

I need to route to a certain component in two ways - one with a param, one without. I have searched for optional params and somehow can't find much info.
So my route:
<pre><code class="hljs language-yaml">{
	path: '/offers/:member',
	component: Offers,
	name: 'offers',
	props: true,
	meta: {
		guest: false,
		needsAuth: true
	}
},
</code></pre>
When I call it with the param programmatically, all is fine
<pre><code class="hljs language-javascript">this.$router.push({ path: /offers/1234 });
</code></pre>
However I also need to call it via nav like this
<pre><code class="hljs language-ini">&#x3C;router-link to="/offers">Offers&#x3C;/router-link>
</code></pre>
The <code>offers</code> component accepts the prop
<pre><code class="hljs language-vbnet">props: ['member'],
</code></pre>
And component used as such
<pre><code class="hljs language-ruby">&#x3C;Offers :offers="data" :member="member">&#x3C;/Offers>
</code></pre>
Now the ugly way I've managed to get it working is duplicating the route and making one of them not take props:
<pre><code class="hljs language-yaml">{
	path: '/offers',
	component: Offers,
	name: 'offers',
	props: false,
	meta: {
		guest: false,
		needsAuth: true
	}
},
</code></pre>
It actually works, but i'm not happy with it - also in dev mode vuejs is warning me <code>[vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }</code>
Surely there's a way to do optional param in the component call <code>:member="member"</code> ?

I am using Nuxt.js / Vuejs for my app, and I keep facing this error in different places:

        The client-side rendered virtual DOM tree is not matching server-rendered content. 
    This is likely caused by incorrect HTML markup, for example nesting block-level elements inside &lt;p&gt;, or missing &lt;tbody&gt;. 
    Bailing hydration and performing full client-side render.

I would like to understand what is the best way to debug this error? Is their a way I can record/get the  virtual DOM tree for client and server so I could compare and find where the error lies? 

Mine is a large application and manually verifying is difficult.

Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered

So, I&#39;ve read [here][1] that in Vue.js, you can use `/deep/` or `&gt;&gt;&gt;` in a selector in order to create style rules that apply to elements inside of child components. However, attempting to use this in my styles, whether in SCSS or in plain old CSS, doesn&#39;t work. Instead, they are sent to the browser verbatim, and therefore have no effect. For example:

**home.vue:**

    &lt;style lang=&quot;css&quot; scoped&gt;
    .autocomplete &gt;&gt;&gt; .autocomplete-input 
    {
    // ...
    }
    &lt;/style&gt;

**generated css:**

    &lt;style type=&quot;text/css&quot;&gt;
    .autocomplete &gt;&gt;&gt; .autocomplete-input[data-v-2bda0c9a]
    {
    //...
    }
    &lt;/style&gt;

**what I want:**

    &lt;style type=&quot;text/css&quot;&gt;
    .autocomplete[data-v-2bda0c9a] .autocomplete-input
    {
    //...
    }
    &lt;/style&gt;

My webpack configuration pertaining to `vue-loader` looks like this:

    // ...
    {
        test: /\.vue$/,
        loader: &quot;vue-loader&quot;,
        options: {
            loaders: {
                scss: &quot;vue-style-loader!css-loader!sass-loader&quot;
            }
        }
    }
    // ...

So my question is, how do I get this `&gt;&gt;&gt;` operator to work?

I&#39;ve already found [this][2] answer, but I&#39;m doing exactly that and it doesn&#39;t work...


  [1]: https://vue-loader.vuejs.org/en/features/scoped-css.html
  [2]: https://stackoverflow.com/a/46964259/3508956

How do I use /deep/ or &gt;&gt;&gt; or ::v-deep in Vue.js?

In my scenario I have mouseover and mouseout events that I want to bind to conditionally (e.g only if user is on a device that has a mouse). 

I realize I can have the condition in the event handler itself but that would still be allocating the memory for the event handlers which is unnecessary. 

Is there a way to make the **event binding itself** conditional? 

(to be clear, what I&#39;d like is to be able to short-circuit the event subscription so the underlying addEventListener operation never happens if the condition is false)

Conditional event binding - vuejs

I am using Nuxt.js, and have a dymanic page which is defined under 

    pages/post/_slug.vue

So, when I visit the page url, say, http://localhost:3000/post/hello-world, how can I read this slug parameter value inside my page.

Currently I am geting it using asyncData as follows:

      asyncData ({ params }) {
        // called every time before loading the component
        return {
          slug: params.slug
        }
      }

This is working fine, but I think this is not the best way, and there should be a better way to make the parameter available to the page. Any help is appreciated! 


How to get route url params in a page in Nuxt2 and 3?

Ok, to explain this simply:

I have 3x pages.

- Page 1 (Home)
- Page 2 (Menu)
- Page 3 (About)

Page 1 has a- 

    &lt;router-link to=&quot;/menu&quot;&gt;

 button that when clicked routes to &quot;/menu&quot;.

For now, Page 2 (Menu) has a 

    &lt;router-link to=&quot;/&quot;&gt;

button and when this button is clicked it reverts to the previous location &quot;/&quot; Page 1 (Home).

But I don&#39;t want to create a component for router for each page to &#39;go back&#39; to the previous page (as if I had 100 pages this could be a lot of work routing back). Is there a way to do this with vue-router? similar to `window.history.back()`

Curious to see if there is a way to do this as I can&#39;t find it in the docs.

Thanks in advance! John





How can I go back/route-back on vue-router?

I can set scrolling behaviour to Vue.js Router like this:

    const router = new Router({
        mode: &#39;history&#39;,
        routes: [
            {
                path: &#39;/&#39;,
                name: &#39;index&#39;,
                component: Main
            },
            {
                path: &#39;/some-path&#39;,
                name: &#39;some-path&#39;,
                component: SomePath
            }
        ],
        scrollBehavior() {
            return {x: 0, y: 0}
        }
    })

This works perfectly when you click on the link with some page which is not current. When I click on the link which is already rendered, i.e. in the footer, nothing happens. Vue Router assumes there is no state transition. What is the preferred way to scroll up in this case?

Vue.js scroll to top of page for same route

This may be simple, but I&#39;ve looked over documentation and can&#39;t find anything about it. I want to have my &#39;github&#39; link redirect to say, github.com. However, its just appending &#39;https://github.com&#39; to my url instead of following the link. Here is a snippet:

     &lt;BreadcrumbItem to=&#39;https://github.com&#39;&gt;
        &lt;Icon type=&quot;social-github&quot;&gt;&lt;/Icon&gt;
     &lt;/BreadcrumbItem&gt;

   (This is using iView for custom CSS, but &#39;to&#39; works in the same way as router-link).

What ends up happening is this:
[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/sJieR.png

VueJs vue-router linking an external website

I would like to specify my titles within the route definition if possible. What is normally specified in `&lt;head&gt;&lt;title&gt;` and appears in the browser title bar.

I have my project set up as follows:

**main.js**

&lt;!-- language: lang-js --&gt;

    import Vue from &#39;vue&#39;
    import App from &#39;./App.vue&#39;
    import VeeValidate from &#39;vee-validate&#39;;
    import router from &#39;./router&#39;
    import ElementUI from &#39;element-ui&#39;;
    import &#39;element-ui/lib/theme-chalk/index.css&#39;;

    Vue.use(VeeValidate);
    Vue.use(ElementUI);
    Vue.config.productionTip = false

    new Vue({
        router,
        render: h =&gt; h(App)
    }).$mount(&#39;#app&#39;)

**router.js**

&lt;!-- language: lang-js --&gt;

    import Vue from &#39;vue&#39;
    import Router from &#39;vue-router&#39;
    import Skills from &#39;./components/Skills.vue&#39;
    import About from &#39;./components/About.vue&#39;
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: &#39;/&#39;,
          name: &#39;skills&#39;,
          component: Skills,
          meta: { title: &#39;Skills - MyApp&#39; } // &lt;- I would to use this one
        },
        {
          path: &#39;/about/:name&#39;,  // Add /:name here
          name: &#39;about&#39;,
          component: About,
          meta: { title: &#39;About - MyApp&#39; }
        }
      ]
    })

Preferably, I would want an automatic system instead of changing page title on the created function of every component. Thanks.




How to change page titles when using vue-router?

I want to get the name of the current route of vue-router, i have a component menu with navigation to another componentes, so i want to dispaly the name of the current route.
I have this:
    
    created(){
        this.currentRoute;
        //this.nombreRuta = this.$route.name;
    },
    computed:{
        currentRoute:{
            get(){
                this.nombreRuta = this.$route.name;
            }
        }
    }

 But the label of the name of the route does not change, the label only show the name of the first loaded route.
Thank You 

**EDIT:**

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/7hNhn.png

Image to show what i want

Content Type	Original Author	Original Content on Stackoverflow
Question	yoyoma	View Question on Stackoverflow
Solution 1 - vue.js	Jacob Goh	View Answer on Stackoverflow
Solution 2 - vue.js	JCH77	View Answer on Stackoverflow
Solution 3 - vue.js	Amit Kadam	View Answer on Stackoverflow

Optional param in vuejs router

vue.js Problem Overview

vue.js Solutions

Solution 1 - vue.js

Solution 2 - vue.js

Solution 3 - vue.js

Android studio 3.0: Unable to resolve dependency for :app@dexOptions/compileClasspath': Could not resolve project :animators

Mock dependency in Jest with TypeScript

Attributions