关于Vue的路由组件router基础总结

最新推荐文章于 2024-03-13 23:12:49 发布

夏至微凉、

最新推荐文章于 2024-03-13 23:12:49 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_31404603/article/details/88672034

博客介绍了VueRouter组件的使用方法，需在任意组件中导入并引用Vue，通过Vue.use()引用VueRouter，要在default中注册组件、定义router，定义routes时注意component写法，还提到router - link和<router - view>的默认情况。

VueRouter组件可以再任意的组件中导入使用，导入之后需要同时对Vue进行引用，如下：

import HelloWorld from './components/HelloWorld.vue'
import test from './components/test'
import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  { path:'/test',component: test}
]
const router = new VueRouter({
  routes
})
export default {
  name: 'app',
  components: {
    HelloWorld,
    test
  },
  router

}

此处，首先导入Vue的路由组件，之后导入Vue的总组件对VueRouter进行引用，即Vue.use（）。此处注意，需要在default中注册组件即，在default中定义router，注意在定义routes的时候里面的component不要写成components否则会报编译错误，这里在每一个Vue模块都会定义一个组件化路由去调用。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-link to="/test">fuck</router-link>
    <router-link to="/">test</router-link>
    <div>
      <router-view></router-view>
    </div>
      <HelloWorld msg="Welcome to Your Vue.js App"/>
    <!--<test/>-->
  </div>
</template>

此处，router-link在页面中默认为<a>标签，<router-view>则是路由组件显示位置。