Script 引入 vueRouter后怎么使用呀?

vueRouter 官网给的是 vue2.6+router 3.x的例子,测试成功。

但是没有给出 vue3.0+router4.0 的例子。

尝试了半天还是没有成功。

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@next"></script>

html:

<div id="app">
  <h1>Hello App!</h1>
  <p>{{value}}
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

js:

<script type="text/javascript">
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

window.onload = function() {
  console.log(VueRouter)
  // 3. 创建 router 实例,然后传 `routes` 配置
  // 你还可以传别的配置参数, 不过先这么简单着吧。
  const router = VueRouter.createRouter({
    routes // (缩写) 相当于 routes: routes
  })

  // 
  const routerTest = {
    router,
    components: { // 尝试手动注册,没有效果
      routerlink: VueRouter.RouterLink
    },
    data() {
      return {
        value: '这是一个路由演示' 
      }
    } 
  }
  const vmRouter = Vue.createApp(routerTest).use(VueRouter).mount('#app')

}

运行没有报错,但是也没有效果,
Go to Foo 没有渲染

有这样的警告

vue.global.js:1235 [Vue warn]: Failed to resolve component: router-view
[Vue warn]: inject() can only be used inside setup() or functional components.
warn @ vue.global.js:1235
inject @ vue.global.js:6597
useRouter @ vue-router.global.js:2771
use @ vue.global.js:4107
window.onload @ foo:83
load (async)
(anonymous) @ foo:45
vue.global.js:1235 [Vue warn]: Failed to resolve component: router-link
at
warn @ vue.global.js:1235
resolveAsset @ vue.global.js:6115
resolveComponent @ vue.global.js:6072
render @ VM2886:12
renderComponentRoot @ vue.global.js:1888
componentEffect @ vue.global.js:5179
reactiveEffect @ vue.global.js:400
effect @ vue.global.js:375
setupRenderEffect @ vue.global.js:5162
mountComponent @ vue.global.js:5120
processComponent @ vue.global.js:5080
patch @ vue.global.js:4702
render @ vue.global.js:5778
mount @ vue.global.js:4174
app.mount @ vue.global.js:9162
window.onload @ foo:83
load (async)
(anonymous) @ foo:45

https://next.router.vuejs.org/guide/#javascript

...
app.use(router)
...

报错呀
vue-router.global.js:2713 Uncaught TypeError: Cannot read property ‘location’ of undefined
at Object.install (vue-router.global.js:2713)
at Object.use (vue.global.js:4103)

Uncaught ReferenceError: Cannot access 'router' before initialization
at window.onload ((index):48)

你的代码发出来看看。

问题说明里面已经给出代码了呀。
用的是vueRouter 4.0
不是官网的vueRouter 3.x

我是说你写了 app.use() 的地方的代码

 const vmRouter = Vue.createApp(routerTest).use(VueRouter).mount('#app')

我新手,我感觉非node方式需要这样:
Vue.use(VueRouter).createApp…。
也就是说use,然后再使用。你试下。

所以啊,你需要 use(router) 而不是 use(VueRouter)

router
你说用啥

因为你的 router 声明在 window.onload 的闭包里了啊,在外面当然访问不到

UMD 版 Vue Router 注入到全局命名空间的啊。问题在于 Vue 3 下你要 use 的不是 Vue Router 本身,而是它的实例。

new to vue-router too, I found the sample for vue3.0+router4.0 vue-router 4 sample, seems to me you do not createRouter, should have been:

var router = VueRouter.createRouter(.....);
Vue.CreateApp(routerTest).use(router).mount('#app')

I tried to rewrite your code a little bit, it seems working:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>title</title>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@next"></script>

</head>

<body>
    <div id="app">
        <p>{{value}}</p>
        <router-link to="/foo">Go to Foo</router-link>&nbsp;&nbsp;
        <router-link to="/bar">Go to Bar</router-link>
        <router-view />
    </div>

    <script>
        const RouterTest = {
            data() {
                return {
                    value: '这是一个路由演示'
                }
            },
        }

        const routes = [
            {
                path: '/',
                component: { template: '<p>Home page</p>' }
            },

            {
                path: "/foo",
                component: { template: '<p>Foo</p>' }
            },
            {
                path: "/bar",
                component: { template: '<p>Bar</p>' }
            }
        ];

        const history = VueRouter.createWebHistory();
        const router = VueRouter.createRouter({ history, routes });

        Vue.createApp(RouterTest).use(router).mount('#app')


    </script>

</body>

</html>

好吧,对不起,我错了,终于弄明白了,谢谢。

Thank you very much.
The program has been debugged
What country do you live in?

1 Like