vueルーティングベース

vueルーティングベース
「ひとつ先のシロ」から抜粋、原作者を応援してください
1----vue-router内蔵コンポーネントrouter-link
aラベルと同様に、単一ページ間のジャンプに使用され、デフォルトではaラベルとしてレンダリングされます.

toプロパティ、ジャンプ用パス

に続く

tagプロパティ、指定ラベル(tab="p")にレンダリングされる

を指定します.

router-link-active、自動アクティブ化されたclass名は、・to・属性の値がアドレスバーパスと同じである場合に自動的にアクティブ化されます.

linkActiveClass,カスタム属性名,ルーティングのindex.jsで

を変更

const router = new VueRouter({
	linkActiveClass:'active',
	//  linkActiveClass  router-link-active     
	routes
})

2----ページ間の値送り
1.query伝値html?idという書き方で値を伝える(query値を伝える)

// /about     
<div class="na" v-for="(item,index) in list" :key="item.name">
	<router-link :to="`/about?${item.id}&{item.name}`">
			//&          
		//   ?${item.name}      /about      -->
		{{item.name}}
	router-link>
div>

/aboutページはthisの$routeのqueryで渡された値を取得できます.

created(){
	//       
	console.log(this.$route.query)
},

2.動的ルーティング値
routerルーティングのindex.jsファイルに動的ルーティングを作成する

{
	//      
	//path:'/info:tit',    
	path:'/info:id/:name',//     
	component:Info
 }

値を渡すページ

<router-link to="/info/      1id/      2name">
//to="/info:id       
	        
router-link>

/infoページ転送された値を受信する

created(){
	//  params    
	console.log(this.$route.params)
}

3----ネストされたルーティング
1ページに複数のサブページがあり、ネストされたルーティングがルーティングを登録するときにルーティング定義children:[ ]を
ルーティングリダイレクト、デフォルトxxxルーティング

{
    path: '/',
    name: 'Home',
    component: Home,
    redirect："/name/a",
	children:[
		{
			path:'a',
			component:a
		},
		{
			path:'b',
			component:b
		},
		{
			path:'c',
			component:c
		}
	]
  },

ホームフェースで呼び出す

<router-link to="/Home/a">a  router-link>   a  
<router-link to="/Home/b">b  router-link>   b  
<router-link to="/Home/c">c  router-link>   c  
<router-view>
	    a/b/c     
router-view>

ルート別名、複数の名前を宣言してもアクセス可能なルートページ

{
    path: '/',
    name: 'Home',
	//      ,             
	alias:['/home','/home1']
    component: Home
  },

ジャンプabout
jquery伝値about
ダイナミックルーティングは値を伝達し、直接値を伝達することはできません.pathをnameに変更し、nameで伝達します.about

{
    path: '/about',
    name: 'about',
    component: about
	
  },

5----r o u t eとrouteとrouteとrouteとroute$route

this.$route//       ，                

$router

this.$router//            routes

$routerページジャンプも可能です

//1.
this.$router.push('/about')
//2.
this.$router.push({path: '/about'})
//3.      
this.$router.push({path: '/about/6/  '})
//4.
this.$router.push({name: '/about',params:{id:6,name:'  '}})
//5.    
this.$router.push("/about?id=7")
//6.  (  ?)
$router.go(-1)
//7.  
$router.back()
//8.  
$router.forward()
//9.      ，      
$router.replace()

テキストリンク