Vue 学习笔记——路由篇
官网:
https://router.vuejs.org/installation.html#direct-download-cdn
安装插件
npm install vue-router
安装完之后在package.json里面查看版本
1、首先新建要跳转的vue文件 在src->component里面新建一个About.vue文件
<template> <div class="container"> <p>This is about</p> <p>参数:{{this.$route.params.userID}}</p> </div> </template> <script> export default { name: "About", data() { return { }; } }; </script>
2、然后src里面新建router文件夹,然后再加一个index.js文件
/*引入Vue框架*/ import Vue from 'vue'; /*引入资源请求插件*/ import VueRouter from 'vue-router'; import About from '@/components/About';/*使用router插件*/ Vue.use(VueRouter); // 创建路由 export default new VueRouter({ routes: [ { path: '/', //首页 }, { path: '/about/:userID', name: 'About', component: About } ] })
3、src->main.js文件
import Vue from 'vue' import App from './App.vue' import router from './router'; Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')
4、App.vue文件
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <router-link to="/about/wangqingzhi" msg="about页面呢">跳转到about </router-link> <router-link to="/" msg="mine页面呢">主页 </router-link> <router-view></router-view> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
点击这个在下面about页面的值了
要注意的是:<router-view></router-view>必须写根元素里面,也就是写在<div id="app"></div>里面