Vue implements routing jump to external page

Vue route jumps to external page

usage

If you use routing to jump back and forth in the vue page, you can use this.$() to implement it, but if you want to jump to an external link in this way, you will get an error because there are prefixes such as HTTP in the external page.

Solution

1. Define the external link to jump in data

data() {
    return {
        url: ''
    }
}

2. Create a click event in the button

<button @click='routeClick(url)'></button>

3. Function implementation

method: {
    routeClick(e) {
        // This method can be used         = e;
    }
}

Several ways to route pages in Vue

1. Declarative navigation router-link

// Note: If the link in router-link starts with the root route, if it does not have '/', it starts with the current route.&lt;router-link :to="{name:'home'}"&gt;  
&lt;router-link :to="{path:'/home'}"&gt; //name,pathAll is OK, Recommendedname

1.2

&lt;router-link :to="{name:'home', params: {id:1}}"&gt;
&lt;router-link :to="{name:'home', query: {id:1}}"&gt;  
&lt;router-link :to="/home/:id"&gt;  
//Pass the object&lt;router-link :to="{name:'detail', query: {item:(obj)}}"&gt;&lt;/router-link&gt;

2. Programming navigation this.$()

Without parameters
this.$('/home')
this.$({name:'home'})
this.$({path:'/home'}
 
With parameters  queryTransfer the ginseng
1.Routing configuration：
name: 'home',
path: '/home'
2.Jump：
this.$({name:'home',query: {id:'1'}})
this.$({path:'/home',query: {id:'1'}})
3.Get parameters
htmlTake ginseng: $
scriptTake ginseng: this.$

Transfer the ginseng

1.Routing configuration：
name: 'home',
path: '/home/:id'(orpath: '/home:id')
2.Jump：
this.$({name:'home',params: {id:'1'}})
Notice：
// Only use name to match routes, not path// Params pass parameters (similar to post) routing configuration path: "/home/:id" or path: "/home:id" otherwise the refresh parameter disappears3.Get parameters
htmlTake ginseng:$ 
scriptTake ginseng:this.$

4. Directly pass parameters through path

1.Routing configuration：
name: 'home',
path: '/home/:id'
2.Jump：
this.$({path:'/home/123'}) 
or：
this.$('/home/123') 
3.Get parameters：
this.$

.$(n)

Jump n pages forward or backward, n can be positive or negative integers

6. Jump the page to open a new window and carry parameters

const routeData = this.$({
                path: `/workbench/customer_detail/${.import_id}`
            })
(, '_blank')

7. Jump new project and carry parameters

(`https://hao123/#/workbench/customer_detail/${.import_id}`)

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.