Vue Router是Vue.js的官方路由插件。
一、引入Vue Router
<script src="[i]https[/i]://unpkg.com/vue@2"></script>
<script src="[i]https[/i]://unpkg.com/vue-router@3"></script>二、使用Vue Router
1、基本路由示例
<div id="app">
<p>
<router-link to="/">主页</router-link>
|
<router-link to="/news">新闻</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = {template: '<div>这是主页。</div>'};
const News = {template: '<div>这是新闻页。</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/news', component: News}
]
});
const app = new Vue({router});
app.$mount('#app');
</script>说明：router-link为路由链接组件，最终转为<a>标签；router-view为路由视图组件，最终被模板内容代替。
2、动态路径参数路由示例
<div id="app">
<p>
<router-link to="/">主页</router-link>
|
<router-link to="/news/10/20">新闻</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = {template: '<div>这是主页。</div>'};
const News = {template: '<div>这是新闻页。tid={{$route.params.tid}}&id={{$route.params.id}}</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/news/:tid/:id', component: News}
]
});
const app = new Vue({router});
app.$mount('#app');
</script>说明：Vue Router动态路径参数匹配语法：/:name1/:name2，参数值使用$route.params.name1、$route.params.name2获取。
3、查询参数路由示例
<div id="app">
<p>
<router-link to="/">主页</router-link>
|
<router-link to="/news?tid=10&id=20">新闻</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = {template: '<div>这是主页。</div>'};
const News = {template: '<div>这是新闻页。tid={{$route.query.tid}}&id={{$route.query.id}}</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '/news', component: News}
]
});
const app = new Vue({router});
app.$mount('#app');
</script>说明：Vue Router查询参数值使用$route.query.name1、$route.query.name2获取。
4、通配符(*)路由示例
<div id="app">
<p>
<router-link to="/">主页</router-link>
|
<router-link to="/news">新闻</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
const Home = {template: '<div>这是主页。</div>'};
const Page404 = {template: '<div>404 Not Found. {{$route.params.pathMatch}}</div>'};
const router = new VueRouter({
routes: [
{path: '/', component: Home},
{path: '*', component: Page404}
]
});
const app = new Vue({router});
app.$mount('#app');
</script>说明：通配符(*)匹配值使用$route.params.pathMatch获取，本例用它实现404页面。
参考资料
[1].Vue Router官网：https://v3.router.vuejs.org/zh/
[2].Vue Router文档：https://v3.router.vuejs.org/zh/guide/
[3].Vue Router API：https://v3.router.vuejs.org/zh/api/
评论（0）
暂无评论。