Vue--vue-router（一）

最新推荐文章于 2024-03-22 09:20:42 发布

refaker

最新推荐文章于 2024-03-22 09:20:42 发布

阅读量104

点赞数

分类专栏： vue-router 文章标签： vue

本文链接：https://blog.csdn.net/refaker/article/details/115478976

版权

vue-router 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用vue.js可以很轻松的创建单页应用，随着页面增多，我们可以引入vue-router路由对多页面进行管理，每个页面都是一个组件，对应一个文件路径，将组件component与路径path对应起来，告诉Vue Router在哪里渲染，这就是路由管理的意义。

安装vue-router

npm install vue-router

引入vue-router

src文件夹-->新建router文件夹-->新建index.js文件，在index.js文件中引入vue-router并使用

//router/index.js
//如果用模块化编程，要引入vue和vue-router，并调用Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
//使用插件
Vue.use(VueRouter);

定义路由，创建router实例

直接定义路由组件或者在src/views文件夹下创建home.vue和about.vue页面组件并import进来，作为对路径的映射

//router/index.js
//定义路由
export const routes = [
    {
        path: '/home',
        component: () => import('../views/home.vue'),
    },
    {
        path: '/about',
        component: () =>import('../views/about.vue'),
    }
];
//创建VueRouter实例，传入routes参数
const router = new VueRouter({
    routes //相当于routes: routes
});
//将创建的实例router暴露出来
export default router;

route表示单条路由，一条路由是一个对象，包含path和component两个属性，path表示路径，component表示路径指向的页面组件；routes表示一组路由，是一个数组；router表示路由管理。

注入路由

//main.js
import Vue from './vue'
import App from './App.vue'
import router from './router'

new Vue({
  router
}).$mount('#app')

<router-link>和<router-view>

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