<template>
<div id="app">
<p>App</p>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<router-link to="/detail/1">Detail 1</router-link>
<router-link to="/detail/2">Detail 2</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
methods: {
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
import Vue from 'vue'
import App from './App.vue'
import router from './router'
var VueResource = require('vue-resource');
Vue.use(VueResource);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import DetailView from '../views/DetailView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: AboutView
},
{
path: '/detail/:id',
name: 'detail',
component: DetailView
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
<template>
<div class="about">
<p>aaaaaa1</p>
<h1>{{ id }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
id: this.$route.params.id
}
},
watch: {
'$route'(to, from) {
this.id = to.params.id
}
}
}
</scriptj
{
"name": "imoney",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vue-resource": "^1.5.3",
"vue-router": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"vue-template-compiler": "^2.6.14"
}
}