Vue-router: [2.0] [Vue warn]: Failed to resolve directive: link (found in component <page1>)

Created on 28 Jul 2016 · 10Comments · Source: vuejs/vue-router

Vue.js & vue-router.js version

2.0.0-beta.5, 2.0.0-beta.2

Reproduction Link

Steps to reproduce

Open console dev tool, there is a waring message:
[Vue warn]: Failed to resolve directive: link (found in component <page1>)
Click text Go to Page2.

What is Expected?

render the Page2 component.

What is actually happening?

noting happened.

Source

JounQin

Most helpful comment

@coderew most likely you are using v-el directive from v1, which is gone from v2. Please follow the migration guide.

simplesmiler on 11 Feb 2017

❤1 👍1

All 10 comments

https://github.com/vuejs/vue-router/releases/tag/v2.0.0-beta.1
The v-link directive has been replaced by the router-link component.

fnlctrl on 28 Jul 2016

❤1 👍1

@fnlctrl thx, but when I'm using an async component with vue-router it gets error like the following:

vue.common.js?9b90:2244[Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in component <links>)

And there is no async component example in the official project.

JounQin on 28 Jul 2016

another error:
vue-router.js:1282 Uncaught TypeError: Cannot read property 'beforeRouteLeave' of undefined

https://jsfiddle.net/JounQin/qyd624yk/

JounQin on 28 Jul 2016

@yyx990803

[Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in component <links>)

This error still occurs when I'm using child component with router-link and dev-server mode in _.vue_ file not Vue.component.tempalte string.

It's so strange that when I build and run it, it works, only when I run npm run dev it fails(no error on my IDE console).

Online demo:
Success and serve on build: http://test.1stg.me
Failure and serve on dev-server: http://test2.1stg.me

then click /bar link.

JounQin on 29 Jul 2016

@JacobChang make sure you require the same Vue build everywhere, do not mix import Vue from 'vue' and import Vue from 'vue/dist/vue'.

yyx990803 on 29 Jul 2016

I just copy your official example of lazy-loading in main.js and add <router-link to="/">Home</router-link> in Bar.vue.

JounQin on 29 Jul 2016

@yyx990803 Any idea? :(
I am using vue template of webpack but I upgrade all the (dev)dependencie in order to use vue-v2.0, vue-router-v2.0 and webpack-v2.0.

Here is my package.json:

{
  "name": "vue-demo",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "JounQin <[email protected]>",
  "private": true,
  "scripts": {
    "dev": "babel-node build/dev-server.js",
    "build": "babel-node build/build.js",
    "lint": "eslint --ext .js,.vue .",
    "lint:fix": "npm run lint -- --fix"
  },
  "dependencies": {
    "babel-runtime": "^6.11.6",
    "vue": "^2.0.0-beta.5",
    "vue-router": "^2.0.0-beta.4"
  },
  "devDependencies": {
    "babel-core": "^6.11.4",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-preset-stage-2": "^6.11.0",
    "babel-register": "^6.11.6",
    "connect-history-api-fallback": "^1.2.0",
    "css-loader": "^0.23.1",
    "eslint": "^3.2.0",
    "eslint-config-standard": "^5.3.5",
    "eslint-friendly-formatter": "^2.0.6",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-html": "^1.5.1",
    "eslint-plugin-promise": "^2.0.0",
    "eslint-plugin-standard": "^2.0.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "file-loader": "^0.9.0",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.22.0",
    "http-proxy-middleware": "^0.17.0",
    "json-loader": "^0.5.4",
    "ora": "^0.2.3",
    "shelljs": "^0.7.3",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^2.0.5",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^9.2.3",
    "vue-style-loader": "^1.0.0",
    "webpack": "^2.1.0-beta.20",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  }
}

May it be an issue of vue-hot-reload-api?

If possible, you can check out test demo for reproducing.

JounQin on 30 Jul 2016

when i use vue2.0, i meet the warn,[Vue warn]: Failed to resolve directive: el
(found in anonymous component - use the "name" option for better debugging messages.
i do not know the warn