Vue学习系列(十九):Vue的路由

Vue学习系列:
上一篇:Vue学习系列(十八):Vue的组件之子组件向父组件通信


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../../node_modules/vue/dist/vue.js">script>
    <script src="../../node_modules/vue-router/dist/vue-router.js">script>
head>
<body>
<div id="app">
    <h1>{{message}}h1>
    <p>
        
        
        
        <router-link to="/foo">Go to Foorouter-link>
        <router-link to="/bar">Go to Barrouter-link>
        <router-link :to="'home'">Homerouter-link>
        
        <router-link :to="{ name: 'user', params: { userId: 123 }}">Userrouter-link>
        
        <router-link :to="{ path: 'register', query: { plan: 'private' }}">Registerrouter-link>
        
        <router-link :to="{ path: '/abc'}" replace>Go to replacerouter-link>
        
        <router-link :to="{ path: 'relative/path'}" append>Go to appendrouter-link>
        
        Go to Route1router-link>
    p>
    
    
    <router-view>router-view>


div>
<script>
const Foo = { template: '
foo
'
}; const Bar = { template: '
bar
'
}; const Home = { template: '
home
'
}; const Route1 = { template: '
route1
'
}; const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }, { path: '/home', component: Home }, { path: '/route1', component: Route1 } ]; const router = new VueRouter({ routes // (缩写)相当于 routes: routes }); const app = new Vue({ el: "#app", data: { message: "Hello App!", }, router });
script> body> html>

你可能感兴趣的:(前端,vue)