The solution to the vue single page can only share the landing page under WeChat.

In fact, the keyword is called WeChat pushState, which can only be shared with the landing page. It is more appropriate

Application scenarios:

1. vue + vue-router
2. vue-router uses hash mode (history mode has not been tried)
3. Don't use WeChat's js-sdk (because my project is a mall with configurable domain names, it's quite special, and you can't use WeChat's sdk)

This solution is not the best and will have a certain impact on performance

HTML5

The internals of vue-router are implemented through and . But the WeChat browser of iOS devices will not detect their changes. However, we can update the WeChat browser to recognize the current URL.

// vue-router/src/util/

export function pushState (url?: string, replace?: boolean) {
 saveScrollPosition()
 // try...catch the pushState call to get around Safari
 // DOM Exception 18 where it limits to 100 pushState calls
 const history = 
 try {
  if (replace) {
   ({ key: _key }, '', url)
  } else {
   _key = genKey()
   ({ key: _key }, '', url)
  }
 } catch (e) {
  [replace ? 'replace' : 'assign'](url)
 }
}

export function replaceState (url?: string) {
 pushState(url, true)
}

Solution

= , This code allows WeChat to record the current URL without refreshing the page. You can execute in watch $route every time the page is updated.

// 

watch: {
 $route: {
  immediate: true,
  deep: true,
  handler(to) {
   // WeChat browser judgement   const WECHAT_BROWSER = ().includes('micromessenger')

   // Solve the problem that the iOS WeChat browser sharing address can only be a landing page. This operation will not refresh the page, and the query parameter will be changed.   if (WECHAT_BROWSER) {
    // eslint-disable-next-line
     = 
   }
  }
},

This problem can be solved by using the above method, but this will lead to a very strange problem. Enter the two pages of http://192.168.1.5:8080 and http://192.168.1.5:8080/#/ on the real machine, and one of the links still exists. The reason is not clear. After testing, you can refresh the page once in the entry file() before the page has been displayed, which can solve this problem.

// 

// WeChat browser judgementconst WECHAT_BROWSER = ().includes('micromessenger')

// The search parameters inserted in the url can be free, but must// Example: http://192.168.1.5:8080/?_wx_=1#/const wxQuery = '_wx_=1'
const isRepeatQuery = (wxQuery)
if (WECHAT_BROWSER && !isRepeatQuery) {
 const unit = ( &&  !== '?') ? '&' : '?'
  += unit + wxQuery  // Add _wx_ parameter, this operation will refresh the page}

The above code adds a ?_wx_=1 parameter in front of hash, so that in order to facilitate refreshing the page, give a flag bit to determine whether it has been refreshed. The key-value of the parameter is arbitrary.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.